Diferente color de fondo para la mitad izquierda y derecha de div

Question

Tengo una distribución de div centrada. El lado izquierdo del div en el fondo debe ser blanco y el lado derecho debe ser verde. Ambos deberían extenderse al infinito.

Creo que debería ser bastante simple, pero simplemente no lo entiendo ahora mismo. ¿Alguna solución fácil? ¡Gracias!

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

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

Answer 1

añadir una imagen de fondo con los dos colores para el div exterior y permitir que el navegador que está a escala (en lugar de embaldosarlo).

Cada color debe llenar exactamente el 50% del ancho de la imagen para asegurarse de que los colores nunca goteen en ninguno de los lados.

Posiblemente incluso coloque la imagen absolutamente detrás del div interior.

Para obtener ideas de cómo estirar la imagen, ver a esta pregunta: CSS Background Repeat

Answer 2

que había guarden dentro de esa div dos otros divs y les dan los tamaños y colores apropiados backgound

Answer 3

puede tener dos divs en el exterior, y luego tener una de sus divs en cada uno. Right-align y left-align respectivamente. De este modo:

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

Answer 4

usar los elementos ::after y ::before psuedo. De esta forma, ¡puedes incluso obtener tres colores y hacer la bandera 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; 
} 

Aquí es un violín: http://jsfiddle.net/g8p9pn1v/

y sus resultados:

Answer 5

¿Qué hay de crear dos divs bg-izquierda y BG-derecha, con una posición absoluta dentro de un contenedor de ancho total. Dado que están posicionados de manera absoluta, puede colocar capas encima de ellos. Así, por ejemplo, el uso de marcas de arranque:

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

A continuación, el 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 6

Puede utilizar Gradiente. Este es un sitio web donde puede obtener el código entre navegadores de lo que necesita.

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

Puede ser un poco confuso para usar en el comienzo, pero me parece que es una herramienta muy potente.

¡Recuerdos!