HTML/CSS: 3 столбца, переменные стороны и фиксированный средний столбец

Question

Моя проблема с заголовком. Поэтому у меня в основном есть 3 столбца div. Я хочу, чтобы средняя имела постоянную ширину 980 пикселей, а затем я хочу, чтобы левая часть заголовка расширялась до конца окна браузера с синим цветом фона. Что касается права заголовка, я хочу, чтобы это было до конца правой части браузера с черным цветом фона. Это вроде выглядит следующим образом:

< ------------------------------ [синий] [центральный заголовок] [ черный] ---------------------------->

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

было бы как:

<div style="width:100%;"> 
    <div style="display:table-cell; background-color:blue;"></div> 
    <div style="width: 980px;">my header</div> 
    <div style="display:table-cell; background-color:black;"></div> 
</div> 

Спасибо!

Answer 1

простое решение - basicaly с помощью точного stying, но поставление другого block в центральной table-cell эля лор, что-то вроде этого span здесь:

<div class="wrapper"> 
    <div class="left"></div> 
    <div class="center"><span>my header</span></div> 
    <div class="right"></div> 
</div> 

Я переехал все встроенный стиль в отдельный блок CSS и используемые селекторы класса:

.wrapper { 
    display:table; 
    width:100%; 
} 
.left { 
    display:table-cell; 
    width:50%; 
    background-color:blue; 
} 
.right { 
    display:table-cell; 
    width:50%; 
    background-color:black; 
} 
.center { 
    display:table-cell; 
} 
.center span { 
    display:inline-block; 
    width:900px; 
} 

здесь является jsfiddle

и здесь я сделал центр намного более узкий для лучшей иллюстрации: jsfiddle

Надеюсь, что это помогает =)

Answer 2

К сожалению, нет более гладкого способа сделать это, что также имеет широкую поддержку кросс-совместимости. Существует спецификация CSS для отображения flex или flexbox, которая будет делать то, что вы хотите красиво и элегантно, но на данный момент она имеет очень ограниченную поддержку. Вот некоторые ресурсы на Flexbox для прочтения ...

http://css-tricks.com/old-flexbox-and-new-flexbox/

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

Heres в JSFiddle: http://jsfiddle.net/CW5dW/

Вот CSS:

.left { 
    width: 50%; 
    height: 300px; 
    float: left; 
    padding-right: 160px; 
    box-sizing: border-box; 
    background: red; 
} 

.right { 
    width: 50%; 
    height: 300px; 
    float: right; 
    padding-left: 160px; 
    box-sizing: border-box; 
    background: blue; 
} 

.middle { 
    position: absolute; 
    width: 300px; 
    height: 300px; 
    left: 50%; 
    padding: 10px; 
    margin-left: -150px; 
    box-sizing: border-box; 
    background: orange; 
} 

Что происходит здесь, вы можете спросить?

В принципе, мы берем div со средним классом и удаляем его из потока документа. Это позволяет нам плавать левый div слева, а наш правый div справа, с шириной 50%, чтобы плавно занять ВСЕ пространство браузера.

Затем мы скажем, что средний div занимает 300 пикселей пространства (в вашем случае 980), и мы скажем, чтобы он оставил 50% общей ширины вашего браузера слева. Это не центрирует его, потому что он рассчитан с левого края вашего div. Таким образом, мы даем ему отрицательное поле в размере половины его ширины, чтобы сортировать «перемещение», оставив край в центр div.

Тогда, поскольку мы знаем, что средний div имеет ширину 300 пикселей (в вашем случае 980), мы можем тогда сказать, что левый div должен иметь некоторую прокладку на правом краю, большую или равную половине средней ширины divs , в моем примере это 150px, и я добавил 10px больше, так что текст не мог прийти прямо к краю div, поэтому всего 160px. Мы делаем то же самое для правого div, но для левой стороны. Это ограничивает содержание этих двух divs от падения под нашим средним div.

Answer 3

Этот ответ не является «ответом» как таковым - это расширенный комментарий к сообщению Майкла. Однако у меня есть другой ответ - решение jQuery.

Относительно ответа Майкла (в действительности это очень аккуратное решение) есть крошечная проблема: если вы удалите объявление высоты (что, несомненно, будет OP), то фоны для различных столбцов станут разоблачены - этот метод полагается на фоне всего выравнивания на их нижнем краю, чтобы сделать проект когерентным. Если в дизайне OP нет фона за столбцами, это решение должно быть прекрасным. Если нужны фоны (которые они могут судить по формулировке вопроса), это может быть неудобно. Два решения этого ...

1. простого Javascript, который сканирует страницу по длине колонны, находит самое длинное и соответствует всем более коротким по максимуму.

2. Другое (и, вероятно, лучшее) решение состоит в том, чтобы отбросить фон с помощью уже имеющихся столбцов (это должно быть только 1px, я думаю) - просто убедитесь, что центральная белая полоса имеет ширину 980 пикселей, а боковые столбцы простираются на тысячу пикселей, чтобы разместить даже самый большой из браузеров.

Answer 4

ОК, вот мое решение. Это представит для всех пользователей «общий или садовый» трехстолбечный формат с фиксированной шириной, а затем настроит его для пользователей с включенным javascript (что, если смотреть на него, является подавляющим большинством пользователей). Преимущества этого решения заключаются в том, что макет будет вести себя как любая обычная 3-х этажная макета без причуд, с которыми вы можете столкнуться, используя более сложные настройки CSS, такие как абсолютное позиционирование и фиксированные высоты.

Fiddle здесь ... http://jsfiddle.net/vuary/

Вы должны быть в состоянии видеть, что происходит с HTML и CSS ... это основной материал. JQuery довольно прямо вперед слишком:

$(document).ready(function(){ 

    // find the width of the browser window.... 
    var docuWidth = $(window).width(); 

    // find the width of the central column as set by the CSS... 
    // (you could hard code this as 980px if desired) 
    var centerWidth = $('#center').width(); 

    // figure out how many pixels wide each side column should be... 
    sideColWidth = (docuWidth-centerWidth)/2; 

    // then set the width of the side columns... 
    $('#left,#right').css({ 
     width:sideColWidth+'px' 
    }); 
}) 

EDIT

преобразовал JQuery в функцию, которая вызывается, когда документ будет готов, и снова, если окно просмотра изменяется ... только в случае, если:

http://jsfiddle.net/aKeqf/