Как я могу разделить два деления рядом для полной ширины экрана?

Question

Есть много вопросов, касающихся бок о бок. Я не скучал по этим. Но мне нужно что-то, что охватывает всю ширину экрана. Это ситуация:

Мне нужно три элемента, расположенных рядом. Левый, средний и правый дивы мы будем называть их Средний div содержит содержимое заголовка сайта и имеет фиксированную ширину (800 пикселей). Я хочу, чтобы левый и правый div занимали всю ширину экрана с обеих сторон. Так ..

<- ВЛЕВО-> | СРЕДНИЙ | <- ВПРАВО ->

Причина, по которой я хочу сделать это, заключается в том, что в среднем (содержании) div есть backgrond, который является градиентом. Скажем, левая сторона градиента - белая, а правая - черная. Мне нужно, чтобы левый div был белым, поэтому это продолжение, а правый div должен быть черным. Таким образом, он выглядит как один жидкий курс, который охватывает всю ширину экрана.

Спасибо.

Answer 1

Хотите контент в левом или правом углу? Если нет, просто придерживайтесь одного центрального делителя, дайте ему ширину и поместите его, используя margin: 0 auto; в вашем CSS. Затем можно установить фоновое изображение тега body с изображением (скажем, 1 на 2400 пикселей), наполовину белым и наполовину черным.

Если вы хотите получить этот эффект сразу за заголовком, вы можете создать div такой же высоты, что и заголовок, и присвоить ему следующие свойства css:

position: absolute;
width: 100%;
z-index: -1;

таким образом, он должен находиться за вашим контейнерным (средним) делением.

Answer 2

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

Решение jsFiddle

Таким образом, не имеет значения, насколько широким является экран: div охватывает 50% вашего экрана, а средняя часть находится позади центрированного div.

Обратите внимание, что вам, возможно, придется использовать обходной путь javascript для проблем с высотой.

Answer 3

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

Answer 4

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

Надеюсь, это поможет, Алин

...WWWWW| DIV |BBBBB...