Сделайте так, чтобы элементы div имели ширину 20% с отступами между ними, но не слева от первого или справа от последнего.

Question

Допустим, мне нужно построить такой макет:

Предполагая, что текст и сетка находятся в одном div и, следовательно, имеют общую ширину около 990 пикселей, как я могу динамически сделать эту сетку столбцами одинаковой ширины без фиксированной ширины?

я мог бы установить каждый div к width:20%, но тогда они выстраивались бы рядом друг с другом, а не на расстоянии. http://jsfiddle.net/97H3P/

я мог бы установить каждый div к width: 20%, box-sizing: border-box, и padding: 0 20px, но тогда между краем линий и краем первой и последней будет зазор в 20 пикселей. div. http://jsfiddle.net/97H3P/1/

я мог бы настроить каждый div к box-sizing: border-box;, width: 20% и padding-right: 20px, а затем в 5-м div установите padding-right: 0;, но тогда пятый div шире остальных. http://jsfiddle.net/97H3P/2/

Я мог бы установить первые четыре divs каждой строки до box-sizing: border-box;, width:20.8%, пятый по width: 16.8%, а потом padding-right: 20px для всех, но эта математика работает только при ширине 990 пикселей. http://jsfiddle.net/97H3P/3/

Есть лучший способ сделать это?Я не могу найти элегантного решения.

Спасибо.

Обновлять:Несколько минут меня интересовали CSS3. column-count эта функция, но потом я понял, что она работает только сверху вниз, а не слева направо, и именно так мне нужно это упорядочить.

Answer 1

Вот пример, не связанный с Boostrap, который я быстро набросал.

Несмотря на то, что он использует классы Bootstrap.

Трюк достигается за счет использования position: relative и box-sizing: border-box

Это также своего рода отзывчивость.

Answer 2

Вам стоит взглянуть на flexbox http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

Как насчет использования дополнительных элементов div в качестве разделителей? скрипка

HTML

<div></div>
<div class="spacer"></div>
<div></div>
<div class="spacer"></div>
<div></div>
<div class="spacer"></div>
<div></div>
<div class="spacer"></div>
<div></div>

CSS

div {
    background: #000;
    height: 200px;
    float: left;
    opacity: 0.2;
    width: 18%;
}

div.spacer{
    opacity: 1;
    width: 2.5%;
}