CSS3 Столбцы Разделяет Mid-Див

У меня есть веб-страницу со структурой следующим образом:CSS3 Столбцы Разделяет Mid-Див

<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>

И я использую CSS3 столбцов для размещения 2-колонки, так что расстояние (маржа) между каждым DIV .post выше, внизу, влево, а справа - 20 пикселей. Проблема, с которой я сталкиваюсь, заключается в том, что иногда дно нижнего левого div.post отрубается и продолжается в верхней части правой колонки.

У меня возникли проблемы с тем, чтобы полный div.post оставался внизу левого столбца, а не разбивался и заканчивался показом в правой колонке. Буду признателен за любую помощь, которую я могу получить! Благодаря!

Кроме того, высота каждого div.post может варьироваться, поэтому плавание всего слева не работает (это грязно).

EDIT: вот соответствующий 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; 
}

источник

2012-01-07 redgem

Вы можете оставить CSS, а? – Emil

Я воспроизвел проблему здесь: http://jsfiddle.net/P7vqr/ – mwcz

Спасибо за это, @mwcz – redgem

Как я понимаю CSS3 columns, это предназначено поведение. Они предназначены для поддержки многоколоночного, газетного текста, где каждый столбец переходит в следующий. Я еще не прочитал спецификацию, поэтому использование их для компоновки блоков может быть выполнимым.

Редактировать: Я натолкнулся на это сегодня: controlling wrapping in css3 columns. Я признаю, что я не пробовал, но это звучит так, как вы.

источник

2012-01-07 05:41:43 mwcz

Правда, но я надеялся на то, чтобы заставить divs не разрушать столбцы. Похоже, это было бы желательным поведением для макета контента. – redgem

Я обновил свой ответ с возможным решением, с которым я столкнулся. – mwcz

Предотвратить колонны разбивающихся внутри элементов с помощью следующего кода:

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

через CSS Tricks

источник

2015-10-16 10:29:27 sidonaldson

Для записи эти идут на дочерние элементы, поэтому '.post' в этом примере. –

CSS3 Столбцы Разделяет Mid-Див

ответ

Смежные вопросы