сделать линию дивы с границами и краями заполнить ширину динамически

Question

Рассмотрим следующий код:

CSS:

.output { 
    margin-right:10px; 
    border:1px solid #000; 
} 
.box{ 
    border-right:1px solid #000; 
} 
.first{ 
    border-left:1px solid #000; 
} 

HTML:

<div class="line"> 
    <div class="output">5</div> 
    <div class="boxes"> 
     <div class="box first"><span>&nbsp;</span></div> 
     <div class="box"><span>&nbsp;</span></div> 
     <div class="box"><span>&nbsp;</span></div> 
     <div class="box"><span>&nbsp;</span></div> 
     <div class="box last"><span>&nbsp;</span></div> 
    </div> 
</div> 

Я хочу divs в горизонтальную линию и заполнить 'line' div '(пространство родителя), но динамически, например, Я не хочу указывать фиксированную ширину для каждого из ящиков, я просто хочу, чтобы они заполнили горизонтальное пространство.

Можно ли это сделать?

Answer 1

Простой и widely supported способ сделать это display: table.

См:http://jsfiddle.net/thirtydot/tPCwD/

Обратите внимание, что вы можете изменить количество .box элементов и он все еще работает.

.line { 
    border: 3px solid red; 
    display: table; 
    width: 100%; 
} 
.output { 
    padding-right: 10px; 
    display: table-cell; 
    width: 1px; /* take the minimum amount of space */ 
    white-space: nowrap; 
} 
.output > span { 
    border:1px solid #000; 
} 
.boxes { 
    display: table; 
    width: 100%; 
    table-layout: fixed; /* to force equal width columns */ 
} 
.box { 
    border-right:1px solid #000; 
    display: table-cell; 
    background: #ccc; 
} 
.first { 
    border-left:1px solid #000; 
} 

Если необходима поддержка IE7 и ниже, вы можете использовать JavaScript только для тех браузеров (условный комментарий). Есть .htc JavaScript polyfill available, но я не уверен, насколько хорошо он будет работать с этим макетом. Кроме того, вы можете просто использовать реальный <table>.

Answer 2

Если вы хотите, чтобы output и boxes заполнили горизонтальное пространство, я бы использовал float:left по телефону output. Таким образом, это займет столько места, сколько потребуется, и поле boxes заполнит остальную часть пространства.

Если, с другой стороны, вы хотите иметь пять boxdiv с, чтобы заполнить их родителей, просто дайте каждой width:20% и установить box-sizing:border-box учитывать для границ. В этом случае вам нужно дать браузеру некоторое представление о том, насколько большой каждый ящик должен быть по отношению друг к другу, иначе как он узнает, какое окно будет расширяться, чтобы заполнить пространство?

Другая альтернатива для 5 box es, если вы хотите быть на «режущей кромке», - это посмотреть на flexbox specification.