Установите края div, чтобы заполнить оставшуюся ширину - PullRequest
Новая
       21

Установите края div, чтобы заполнить оставшуюся ширину

1 голос
/ 31 марта 2011

Я нашел несколько похожих сценариев, которые уже были заданы, но ни один из них не решает эту конкретную проблему. Я надеюсь, что кто-то может помочь!

Три деления подряд. Средний div центрирован и имеет заданную ширину и высоту. Два внешних элемента должны расширяться, чтобы заполнить оставшееся пространство между краем окна и краем центрального элемента. Как это:

http://kthornbloom.com/example.jpg

* примечание - я бы хотел решить эту проблему с помощью CSS, но если требуется javascript, все будет в порядке

* note2 - Цель этого не в том, чтобы центрировать средний div, я знаю, что есть лучшие способы сделать это. Цель заключается в разработке дизайна сайта, в котором используется элемент фона, который должен быть на всю ширину страницы, кроме середины.

Ответы [ 3 ]

8 голосов
/ 01 апреля 2011

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

HTML: 

<div id="container">
    <div id="left">&nbsp;</div>
    <div id="mid">mid</div>
    <div id="right">&nbsp;</div>
</div>

CSS: 

#container {
    width: 100%;
    height: 200px;
    display: table
}
#left, #mid, #right {
    display: table-cell;
    background: #ccc;
    outline: 2px dashed blue
}
#mid {
    width: 400px;
    background: #f0f
}

Я думаюэто хорошо отвечает на ваш вопрос, но это касается меня:

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

Вы уверены, что вам действительно нужно такое сложное решение, как это?Может быть, что-то попроще:
http://jsfiddle.net/thirtydot/xhCXq/1/

3 голосов
/ 21 июня 2011

Не уверен, поможет ли это, но я обнаружил этот забавный трюк. Кажется, работает в IE 8, IE 9, FireFox 3.6, FireFox 4 и Safari 5 (для Windows, по крайней мере). 

<div name="test1" id="test1" style="position:absolute; left:0px; top:95px; width:50%; height:300px; z-index:5; background: #7BCDC9;">
This starts at the left edge, and goes all the way to the middle of the screen.
</div>
<div name="test2" id="test2" style="position:absolute; left:50%; top:95px; width:50%; height:300px; z-index:5; background: #4D3627;">
Starts in the middle, and goes all the way to the right edge.
</div>

Затем добавьте ваш центрированный div поверх (используя ваш любимый метод), используя z-index: 10; сделать это "поверх" других элементов.

3 голосов
/ 01 апреля 2011

CSS не является динамическим языком, его нельзя использовать для вычисления оставшегося пространства. Вы можете использовать jQuery для этого. В приведенном ниже примере средний div будет оставаться 400px, а оставшееся пространство будет разделено между левым и правым div. 

function calc() {
    var ww = $(window).width();
    var rem = ww - $('.div2').width();
    $('.div1, .div3').css('width', rem / 2);
}
calc();
$(window).resize(calc);

Проверьте рабочий пример на http://jsfiddle.net/M5Ghx/3/

...