Diferente background-color para a metade esquerda e à direita div

Question

Eu tenho um centrado div layout. O lado esquerdo da div no fundo deve ser branco e do lado direito deve ser verde. Ambos devem se estender ao infinito.

Eu acho que deve ser bastante simples, mas eu simplesmente não entendo isso agora. Qualquer solução fácil? Obrigado!

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

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

Answer 1

Adicionar uma imagem de fundo com as duas cores para o div externa e permitir que o navegador para escalá-lo (em vez de ladrilhos-lo).

Cada cor deve preencher exatamente 50% da largura da imagem para garantir que as cores nunca vai vazar em ambos os lados.

Talvez até posicionar a imagem absolutamente atrás do div interior.

Para idéias como esticar a imagem, consulte esta pergunta: CSS Background Repita

Answer 2

elementos

Use o ::after e pseudo ::before. Dessa forma, você pode até obter três cores e fazer a bandeira italiana!

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;
}

Aqui está um violino: http://jsfiddle.net/g8p9pn1v/

e seus resultados:

Answer 3

Você pode ter duas divs do lado de fora, e depois ter um de seus divs em cada um. Direito-align e-align esquerda, respectivamente. Como assim:

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

Answer 4

Que tal criar dois divs bg-esquerda e bg-direita, com uma posição absoluta dentro de um contêiner de largura total. Uma vez que eles são absolutamente posicionado, você pode então camada de conteúdo em cima deles. Assim, por exemplo, usando inicialização marcação:

<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>

Em seguida, o 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

Eu colocaria dentro dessa div dois outros divs e dar-lhes os tamanhos apropriados e cores backgound

Answer 6

Você pode usar Gradient . Este é um site onde você pode obter o código cross-browser do que você precisa.

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

Pode ser um pouco confuso para usar no início, mas acho que é uma ferramenta muito poderosa.

Saudações!