Diverso background-color per la metà destra ea sinistra del div

Question

Ho un layout div centrato. Il lato sinistro del div sullo sfondo dovrebbe essere bianco e il lato destro dovrebbe essere verde. Entrambi dovrebbero estendersi all'infinito.

Penso che dovrebbe essere abbastanza semplice, ma io proprio non capisco adesso. Qualsiasi soluzione facile? Grazie!

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

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

Answer 1

Aggiungere un'immagine di sfondo con i due colori per il div esterno e consentire al browser di scala esso (invece di piastrelle esso).

Ogni colore deve riempire esattamente il 50% della larghezza dell'immagine per assicurarsi che i colori non saranno mai perdere su entrambi i lati.

Forse anche posizionare l'immagine assolutamente dietro il div interno.

Per idee su come allungare l'immagine, vedere questa domanda: CSS Sfondo Ripetere

Answer 2

utilizzare gli elementi pseudo ::after e ::before. In questo modo si può anche ottenere tre colori e fare la bandiera 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;
}

Ecco un violino: http://jsfiddle.net/g8p9pn1v/

E i suoi risultati:

Answer 3

Si potrebbe avere due div sulla parte esterna, e quindi avere uno dei vostri div in ciascuno. Destra-align e sinistra-align rispettivamente. In questo modo:

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

Answer 4

Che ne dite di creare due div bg-sinistra e bg-destra, con una posizione assoluta all'interno di un contenitore pieno di larghezza. Dal momento che sono posizionati in modo assoluto, quindi è possibile sovrapporre contenuti su di essi. Così, per esempio, utilizzando markup bootstrap:

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

Allora il vostro 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

Avevo messo dentro che div div due altri e dare loro le dimensioni appropriate e colori backgound

Answer 6

È possibile utilizzare Gradient . Questo è un sito web dove è possibile ottenere il codice cross-browser di che cosa avete bisogno.

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

Può essere un po 'di confusione per usare agli inizi, ma lo trovo uno strumento molto potente.

Saluti!