Автосостояние между горизонтальными divs в CSS

Я много искал, но мне не посчастливилось найти решение для того, что я хочу!

Вот проблема: я создал master div (ширина 100%) и внутри него есть несколько внутренних div. Вы можете увидеть его здесь: http://jsfiddle.net/EAkLb/1/

HTML:

<div class="section_zone">
    <div class="box_frame" id="_15">inner box 1</div>
    <div class="box_frame" id="_15">inner box 2</div>
    <div class="box_frame" id="_15">inner box 3</div>
    <div class="box_frame" id="_15">inner box 4</div>
</div>

То, что я пытаюсь выполнить, - автоматическая ширина пробела между внутренними div.

первый-ребенок выровнен по левому краю, а последний - вправо, но, как вы можете видеть, пространство между другими divs не совпадает.

Надеюсь, что следующее демонстрационное изображение поможет вам объяснить, что я точно:

Обратите внимание: в fiddle я добавил 4 внутренних div, но решение, которое я должен, должно работать без матер, сколько у меня divs (например, 2, 3, 4, 5,... и т.д.).

Заранее благодарим за помощь.

Ответ 1

Вот JSFiddle

Предположим, что у вас есть 100%, и у вас есть 4 штуки. 4 части означают, что у вас есть 3 поля с левым краем, поэтому, когда вы делаете свой div 22 * 4 = 88, затем 100-88 = 12, затем 12/3 = 4, тогда ваша левая маржа должна быть: 4

div.box_frame{
    float: left;
    background-color: #eee; /* standard background color */
    border: 1px solid #898989; 
    border-radius: 11px;
    padding: 2px;
    margin-left:4%;
    text-align: center;
    /* change border to be inside the box */
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
div.box_frame:first-child{
    margin-left: 0;
}
div.box_frame#_15{ /* width 15% */
    width: 22%;
}

Итак, если вы используете меньше переменных, вы можете использовать это решение, не зависимо от количества блоков div

Ответ 2

В первую очередь, вы не можете использовать один и тот же ID более одного раза за страницу HTML.

Во-вторых, вы на правильном пути. Просто используйте margin-right для каждого элемента, затем добавьте psuedo-class из last-child и установите margin в 0.

http://jsfiddle.net/EAkLb/1/

Чтобы сделать работу таким образом для any amount of divs, было бы лучше всего установить percentage, что имеет смысл. (т.е. 25% для 4, 33% для 3, 16,6% для 6 и т.д.)

EDIT:

Это будет намного лучший способ сделать это (попробуйте изменить размер окна):

http://jsfiddle.net/EAkLb/5/

Ответ 3

Вы можете добиться этого эффекта, положив display:inline-block на все дочерние элементы, а затем примените text-align-last:justify к родительскому контейнеру, чтобы включить равномерно распределенные дочерние элементы.

См. здесь работу Fiddle.

Однако есть несколько предостережений - в то время как Firefox поддерживает это с v12, а IE даже с 5,5, официально нет поддержки в Webkit, Он работает, но работает отлично в 32-бета-версии Chrome с включенными определенными флагами, в то время как он не работает в Chrome 31-стабильной или текущей версии iOS Safari, например.

Во-вторых, IE, похоже, уважает только text-align-last, когда есть также объявление text-align того же типа (что не соответствует стандартам).

Я не знаю о каком-либо способе достижения этого эффекта по-другому в старых браузерах Webkit, но вы могли бы решить это, например, с помощью резервного запаса на основе маржи или получить JS-расчет во время выполнения.