Unterschiedliche Hintergrundfarbe für linke und rechte Hälfte von div

Question

Ich habe ein zentriertes Div-Layout. Die linke Seite des div im Hintergrund sollte weiß sein und die rechte Seite sollte grün sein. Beide sollten bis ins Unendliche reichen.

Ich denke, es sollte ziemlich einfach sein, aber ich bekomme es gerade nicht sofort. Jede einfache Lösung? Vielen Dank!

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

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

Answer 1

hinzufügen Hintergrundbild mit den zwei Farben an der äußeren div und ermöglichen es dem Browser es zu skalieren (anstatt es zu kacheln).

Jede Farbe sollte genau 50% der Breite des Bildes ausfüllen, um sicherzustellen, dass die Farben auf keiner Seite auslaufen.

Vielleicht sogar das Bild absolut hinter dem inneren div positionieren.

Für Ideen, wie das Bild strecken, sieht diese Frage: CSS Background Repeat

Answer 2

hatte ich nach innen, dass div zwei anderen divs setzen und ihnen die entsprechenden Größen und Farben backgound

Answer 3

Sie zwei Divs auf der Außenseite haben könnten, und dann einen des divs in jeweils. Rechtsbündig ausrichten bzw. links ausrichten. Wie so:

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

Answer 4

Verwenden Sie die ::after und ::before psuedo Elemente. Auf diese Weise können Sie sogar drei Farben erhalten und die italienische Flagge machen!

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

Hier ist eine Geige: http://jsfiddle.net/g8p9pn1v/

und ihre Ergebnisse:

Answer 5

Wie etwa zwei divs bg-links und bg-Recht zu schaffen, mit einer Position absolut innerhalb einer vollen Breite Behälter. Da sie absolut positioniert sind, können Sie dann den Inhalt darüber schichten. So zum Beispiel mit Bootstrap-Markup:

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

Dann 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

können Sie Gradient verwenden. Dies ist eine Website, wo Sie den Cross-Browser-Code von dem bekommen können, was Sie brauchen.

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

Es kann ein wenig verwirrend sein, am Anfang zu verwenden, aber ich es ein sehr leistungsfähiges Werkzeug finden.

Grüße!