Разный цвет фона для левой и правой половины div

Question

У меня есть центрированный макет div.Левая часть div на заднем плане должна быть белой, а правая — зеленой.Оба должны простираться до бесконечности.

Я думаю, что это должно быть довольно просто, но сейчас я этого не понимаю.Есть какое-нибудь простое решение?Спасибо!

-----------------------------------------------------
(div 1)     __________________________ 
           |(div 2)         |         |
           |                |         |
           |                |         |
<- white   |     white      |  green  |   green  ->
           |                |         |
           |                |         |
           |________________|_________|

------------------------------------------------------

Answer 1

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

Каждый цвет должен занимать ровно 50% ширины изображения, чтобы цвета никогда не растекались по обеим сторонам.

Возможно, даже расположите изображение абсолютно за внутренним элементом div.

Идеи о том, как растянуть изображение, см. в этом вопросе: CSS-повторение фона

Answer 2

Использовать ::after и ::before псевдоэлементы.Таким образом, вы даже можете получить три цвета и сделать итальянский флаг!

div {
    height:300px;
    width:100%;
    outline:thin solid black;
    position:relative;
    background:white;
}
div::after, div::before {
    height:300px;
    content:' ';
    position: absolute;
    top: 0;
    width: 33%;
}
div::after {
    right: 0;
    background-color: red;
}
div::before {
    left: 0;
    background-color: green;
}

Вот скрипка: http://jsfiddle.net/g8p9pn1v/

И его результаты:

Answer 3

Вы можете иметь два div снаружи, а затем иметь по одному из своих div в каждом.Выравнивание по правому и левому краю соответственно.Вот так:

-----------------------------------------------------
(div)                       | (div)
           _________________|_________ 
           |(div)           |  (div)  |
           |                |         |
           |                |         |
<- white   |     white      |  green  |   green  ->
           |                |         |
           |                |         |
           |________________|_________|
                            |
------------------------------------------------------

Answer 4

Как насчет создания двух элементов div bg-left и bg-right с абсолютной позицией внутри контейнера полной ширины.Поскольку они абсолютно позиционированы, вы можете накладывать на них контент.Например, используя разметку начальной загрузки:

<div class="fullwidth">
    <div class="bg-left"></div>
    <div class="bg-right"></div>    

    <div class="container">
        <div class="row">
            <div class="col-xs-6">
                Insert left side content here...
            </div>
            <div class="col-xs-6">
                Insert right side content here...
            </div>
        </div>
    </div>
</div>

Тогда ваш CSS:

.fullwidth {
    position: relative;
    width: 100%;
 }
.bg-left {
    background: #000; 
    left: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    width: 50%;
}
.bg-right {
    right: 0;
    top: 0;
    bottom: 0;
    background: #ddd; 
    position: absolute;
    width: 50%;
}

Answer 5

Я бы поместил в этот div два других div и присвоил им соответствующие размеры и цвета фона.

Answer 6

Вы можете использовать Градиент.Это веб-сайт, на котором вы можете получить кроссбраузерный код того, что вам нужно.

http://colorzilla.com/gradient-editor/

Поначалу его использование может показаться немного запутанным, но я считаю, что это очень мощный инструмент.

С уважением!