content1

All geek questions in one place

CSS3 Mid-div Column Separators

I have a web page with the structure as follows:

<div id="content"> <div class="post"> <p>content1</p> </div> <div class="post"> <p>content2</p> </div> <div class="post"> <p>content3</p> </div> <div class="post"> <p>content4</p> </div> </div>

And I use CSS3 columns for a two-column layout, so the distance (margin) between each div.post is higher, lower, left and right is 20 pixels. The problem I am facing is that sometimes the bottom of the bottom left div.post is chopped off and continues at the top of the right column.

I'm having trouble getting the full div.post to stay at the bottom of the left column, rather than breaking up and ending up showing in the right column. I would be grateful for any help I can get! Thanks!

In addition, the height of each div.post can be different, so moving everything to the left does not work (this is random).

EDIT: here's the relevant CSS:

 #content { margin-bottom:20px; width:910px; -webkit-column-count: 2; -webkit-column-gap: 0; -moz-column-count: 2; -moz-column-gap: 0; column-count: 2; column-gap: 0; } .post { width:410px; margin:20px; padding:10px; }
+6
source share
2 answers

As I understand the CSS3 columns , this is the intended behavior. They are designed to support multi-column, newspaper text, where each column goes into the next. I have not read the specification yet, so using them to build blocks can be feasible.

Edit: I came across this today: flow control in css3 columns . I admit that I have not tried it, but it seems like what you need.

+5
source

Prevent column breaks inside elements with the following code:

 -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid;

through CSS tricks

+1
source

Source: https://habr.com/ru/post/905382/

More articles:


All Articles