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

Question

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

Я создал эту скрипку , чтобы показать, что я пытаюсь сделать.

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

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

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

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

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

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

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

EDIT: Я бы хотел услышать ваши комментарии об этом.

Answer 1

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

http://jsfiddle.net/GyxWm/

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

Answer 2

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

И добавьте этот javascript где-нибудь после этих тегов:

    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%; из раздела FillUp вCSS

Answer 3

Боюсь, я не думаю, что вы можете.

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

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

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

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

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

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

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

Вероятно, вам не очень поможет.извините, если нет.

Ура