Как растянуть два div-элемента, чтобы заполнить доступное горизонтальное пространство?

Question

Я очень надеюсь, что вы можете мне помочь.

Я создал this fiddle, чтобы показать, что я пытаюсь сделать.

Мой вопрос: Как растянуть два div-элемента, чтобы заполнить доступное горизонтальное пространство?

Как вы можете видеть, есть 5 div-элементов, натянутых вместе, обернутых элементом div, где я устанавливаю фоновый цвет и ширину со 100%.

Существует три div-элемента с шириной 50 пикселей.

Ширина двух других элементов div должна быть заполнена до остальной доступной площади, они должны иметь одинаковую ширину -> 50% для каждого из обоих div.

Моя проблема в том, что 50% для обоих обоих элементов составляют 100% общей ширины. И не к доступной ширине пространства.

Я стараюсь не использовать таблицы и т.д.

Позвольте мне знать, если есть что-то неясно.

EDIT: I'd like to hear your comments about this way.

Answer 1

Один из способов решить эту проблему является обрабатывайте свои divs подобно ячейкам таблицы. Уникальным свойством таблиц является то, что ячейки будут заполнять ширину таблицы независимо от того, какую ширину вы им даете. Предоставляя некоторым ячейкам ширину, другие ячейки заполнят оставшееся пространство. Используя display:table и display:table-cell, вы можете воспользоваться этим, не меняя свой html. Посмотрите на этот пример:

http://jsfiddle.net/GyxWm/

Я не проверял это, но он должен работать во всех «текущих» браузеров. Он должен работать в IE8 +, но, вероятно, не работает в IE7 и, конечно же, не будет работать в IE6.

Answer 2

Afraid Я не думаю, что вы можете.

float:left; удаляет ваш код из содержащего div, и все элементы оказываются рядом друг с другом, как только элемент покидает экран вправо, он обтекает его, оставляя пробел (немного похожее на относительное позиционирование).

Кроме того, вы пытаетесь сравнить фиксированную ширину с переменной шириной, которая практически невозможна.

Если вы посмотрите здесь: http://jsfiddle.net/P5Kjh/5/

Сначала я уменьшил свой код обратно 2 дивы и получил это работает.

Я добавил overflow:hidden в класс backgroundG, чтобы убедиться, что есть серый фон и плавают оба divs слева.

Затем я устанавливаю ширину, общая сумма должна составлять около 100%, если вы добавляете границу для каждого элемента, вам нужно работать до меньшего процента.

Затем я добавил обратно другой 3 в новый элемент backgroundG и создал класс separte для элемента fillup, чтобы он составлял 80% (без рамки).

Возможно, вам не помогает. извините, если нет.

Приветствия

Answer 3

Вы можете сделать это с помощью JavaScript.Изменение DIV-теги, как это:
<div id="part1" class="sectionFillUp">section2</div>
<div id="part2" class="sectionFillUp">section4</div>

и добавить JavaScript somehwere после этих тегов:

    var elem1 = document.getElementById("part1"); 
    elem1.style.width = (screen.width - 150)/2; 
    var elem2 = document.getElementById("part2"); 
    elem2.style.width = (screen.width - 150)/2; 

И удалить width:50%; из sectionFillUp в CSS