div

Question

के बाएं और दाएं आधा भाग के लिए अलग-अलग पृष्ठभूमि-रंग मेरे पास एक केंद्रित div लेआउट है। पृष्ठभूमि में div के बाईं तरफ सफेद होना चाहिए और दाहिने तरफ हरा होना चाहिए। दोनों को अनंत तक बढ़ाया जाना चाहिए।

मुझे लगता है कि यह काफी सरल होना चाहिए लेकिन मुझे अभी यह नहीं मिला है। कोई आसान समाधान? धन्यवाद!

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

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

Answer 1

बाहरी div करने के लिए दो रंगों के साथ एक पृष्ठभूमि छवि जोड़ें और ब्राउज़र यह पैमाने पर करने के लिए अनुमति देते हैं (था इसे टाइल करने के बजाय)।

प्रत्येक रंग को छवि की चौड़ाई का बिल्कुल 50% भरना चाहिए ताकि यह सुनिश्चित किया जा सके कि रंग कभी भी किसी तरफ रिसाव नहीं होंगे।

शायद आंतरिक div के पीछे पूरी तरह से छवि को भी स्थिति दें।

विचारों छवि को फैलाने के लिए कैसे, इस सवाल देखें: CSS Background Repeat

Answer 2

मुझे लगता है कि div दो अन्य divs के अंदर डाल दिया और उन्हें उचित आकार और backgound रंग दे

Answer 3

आप बाहर की दुनिया में दो divs हो सकता था, और फिर प्रत्येक में अपने divs में से एक है। क्रमशः राइट-एलाइन और बाएं-एलाइन। इसलिए जैसा:

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

Answer 4

::after और ::before छद्म तत्वों का प्रयोग करें। इस तरह आप तीन रंग भी प्राप्त कर सकते हैं और इतालवी ध्वज कर सकते हैं! http://jsfiddle.net/g8p9pn1v/

और उसके परिणामों:

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

यहाँ एक बेला है

Answer 5

के बारे में स्थिति पूरी चौड़ाई कंटेनर के अंदर पूर्ण के साथ दो divs bg-बाएँ और bg-सही बनाने के लिए कैसे,। चूंकि वे पूरी तरह से स्थित हैं, फिर आप उनके ऊपर सामग्री ले सकते हैं। उदाहरण के लिए तो, बूटस्ट्रैप मार्कअप का उपयोग कर:

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

फिर अपने सीएसएस:

.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

आप ढाल उपयोग कर सकते हैं। यह एक ऐसी वेबसाइट है जहां आपको अपनी आवश्यकता के क्रॉस-ब्राउज़र कोड मिल सकते हैं।

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

यह थोड़ा शुरुआत में उपयोग करने के लिए भ्रमित हो सकता है, लेकिन मैं यह एक बहुत शक्तिशाली उपकरण हैं।

सम्मान!