Изменение выравнивания столбцов CSS с тремя столбцами

Question

У меня есть макет, который может быть 1-, 2- или 3-столбцом в зависимости от @media.

См https://jsfiddle.net/rcfpcdhq/

С тремя колоннами, когда (number of content divs) % 3 = 1, последний столбец всегда две дивы короче, чем первые два, хотя я бы предпочел первый столбец единственный столбец с дополнительным DIV в нижней части (в этом примере количество столбцов по столбцам будет 3-2-2 вместо 3-3-1).

Это что-то, что может быть затронуто CSS? Я мог бы использовать Bootstrap вместо column-count, хотя я не могу придумать способ поддерживать вертикальное упорядочение с помощью колонок с использованием BS push/pulls.

Любые идеи? Мне что-то не хватает?

Только идея у меня есть, чтобы вставить распорную DIV после «Div-5», которая скрыта в 1- и 2-столбцов макетов, для того, чтобы заставить «Div-6» в третьей колонке ...

EDIT: Чтобы было ясно, порядок семи дивы в зависимости от количества столбцов, должно быть:

1-Column  2-Columns   3-Columns 
--------  -------------  -------------------- 
[div1]  [div1] [div5]  [div1] [div4] [div6] 
[div2]  [div2] [div6]  [div2] [div5] [div7] 
...   [div3] [div7]  [div3] 
[div7]  [div4] 

Answer 1

Вы не можете сделать это с колоннами, потому что column-count заполняет первый столбец, а затем второй столбец, и т.д. И вы хотите заполнить строку, а не колонку.

Вы можете сделать это без колонок, сделав поплавок DIV слева.

Поплавок влево используется так, что DIV будут заказывать себя слева направо, а затем сверху вниз.

Ширина составляет 32% (умножается на три столбца, она дает 96%), а поле справа составляет 2% (умноженное на первые два столбца, это даст окончательный 100%). Вы можете настроить, как вам угодно.

.content:nth-of-type(3n+0) есть, потому что в противном случае DIV в третьем столбце будет иметь правое поле, делая его 102% (или создавая бесполезное пространство, если вы отрегулируете его до 100%).

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.content { 
 
    float: left; 
 
    box-sizing: border-box; 
 
    border: 1px solid black; 
 
    height: 100px; 
 
    width: 32%; 
 
    margin-right: 2%; 
 
} 
 
.content:nth-of-type(3n+0) { 
 
    margin-right: 0; 
 
}

<div class="content"> 
 
    div-1 
 
</div> 
 

 
<div class="content"> 
 
    div-2 
 
</div> 
 

 
<div class="content"> 
 
    div-3 
 
</div> 
 

 
<div class="content"> 
 
    div-4 
 
</div> 
 

 
<div class="content"> 
 
    div-5 
 
</div> 
 

 
<div class="content"> 
 
    div-6 
 
</div> 
 

 
<div class="content"> 
 
    div-7 
 
</div>

Ваш Fiddle: https://jsfiddle.net/rcfpcdhq/1/

Answer 2

Добавить дополнительный clearfix только для требуемого окна просмотра, как .visible-xs-block, .visible-sm-block, .visible-md-block и .visible-lg-block.

<div class="row"> 
    <div class="col-xs-4 col-md-6 col-lg-12">1</div> 
    <div class="col-xs-4 col-md-6 col-lg-12">2</div> 

    <div class="clearfix visible-md-block"></div> <!-- It works on medium size --> 

    <div class="col-xs-4 col-md-6 col-lg-12">3</div> 

    <div class="clearfix visible-xs-block"></div> <!-- It works on small size --> 

    <div class="col-xs-4 col-md-6 col-lg-12">4</div> 

    <div class="clearfix visible-md-block"></div> <!-- It works on medium size --> 

    <div class="col-xs-4 col-md-6 col-lg-12">5</div> 
    <div class="col-xs-4 col-md-6 col-lg-12">6</div> 

    <div class="clearfix visible-xs-block"></div> <!-- It works on small size --> 

    <div class="clearfix visible-md-block"></div> <!-- It works on medium size --> 

    <div class="col-xs-4 col-md-6 col-lg-12">7</div> 
</div> 

Теперь вы будете иметь:

[1]

[2]

[3]

[4]

[5]

[6]

[7]

для большого размера,

[1] [2]

[3] [4]

[5] [6]

[ 7]

для средних размеров и

[1] [2] [3]

[4] [5] [6]

[7]

для малого размера.