Różne kolory tła dla lewej i prawej połowy elementu

Question

Mam wyśrodkowany układ div. Lewa strona elementu div w tle powinna być biała, a prawa strona powinna być zielona. Obie powinny rozciągać się do nieskończoności.

Myślę, że powinno być całkiem proste, ale po prostu nie rozumiem tego teraz. Jakieś łatwe rozwiązanie? Dziękujemy!

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

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

Answer 1

Dodaj obraz tła z dwóch kolorów do zewnętrznej div i pozwolić przeglądarce, by go przeskalować (zamiast układania go).

Każdy kolor powinien wypełnić dokładnie 50% szerokości obrazu, aby upewnić się, że kolory nigdy nie wyciekają po obu stronach.

Może nawet ustawić obraz absolutnie za wewnętrznym elementem div.

Dla pomysłów jak rozciągnąć obraz, widzą to pytanie: CSS Background Repeat

Answer 2

ja umieścić wewnątrz tego div div dwóch innych i dać im odpowiednie rozmiary i kolory backgound

Answer 3

można mieć dwa DIV na zewnątrz, i wtedy jeden z div w każdej. Wyrównanie odpowiednio do prawej i lewej strony. Tak:

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

Answer 4

pomocą elementów pseudohalogenek ::after i ::before. W ten sposób możesz uzyskać nawet trzy kolory i zrobić włoską flagę!

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

Oto skrzypce: http://jsfiddle.net/g8p9pn1v/

a jego wyniki:

Answer 5

Jak o stworzenie dwóch DIV BG-lewy i BG-prawo, z pozycji absolutnej wewnątrz pełnego pojemnika szerokości. Ponieważ są one absolutnie pozycjonowane, możesz na nich nakładać warstwę. Tak na przykład, za pomocą znaczników 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> 

wówczas 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

Można użyć Gradient. To jest strona internetowa, na której można uzyskać kod przeglądarki zawierający wszystkie potrzebne informacje.

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

To może być trochę mylące, aby użyć na początku, ale uważam, że jest to bardzo potężne narzędzie.

Pozdrawiam!