किसी कंटेनर के अंदर आंतरिक फ़्लोटिंग तत्वों से पहले टेक्स्ट रैप कैसे बनाएं

Question

कंटेनर के अंदर आंतरिक फ़्लोटिंग तत्वों से पहले टेक्स्ट रैप कैसे बनाएं?

यहाँ मैं रैप करने के लिए मैं हरी div के अंदर का पाठ (बीच में) चाहते हैं करने के लिए ...

http://codepen.io/W3Max/pen/tKwqz

<div> 
 
    <div style="height:100px;width:300px;background-color:blue;float:left;"></div> 
 
    <div style="height:100px;float:left;word-wrap: break-word;background-color:green;">sdffds dgsdfgsdg sdfgsdfg sdfgsdfg ijhjkhkh lkjlk</div> 
 
    <div style="height:100px;width:300px;background-color:red;float:left;"></div> 
 
</div>

कोशिश कर रहा हूँ है जब मैं स्क्रीन का आकार बदलता हूं तो पंक्ति लपेटने से पहले।

मैं IE9 का समर्थन करना पसंद करूंगा। क्या यह फ्लेक्सबॉक्स के बिना संभव है?

Answer 1

display:table साथ IE8 + संगत है और प्राप्त कर सकते हैं कि आप क्या देख रहे हैं:

Forked pen.

.container { 
 
    display: table; 
 
    width: 100%; 
 
    /* if you don't want 100% width, set a max-width too */ 
 
    word-wrap: break-word; 
 
} 
 
.container > div { 
 
    display: table-cell; 
 
    height: 100px; 
 
} 
 

 
.container > div:first-child, .container > div:last-child { 
 
    width: 300px; 
 
}

<div class="container"> 
 
    <div style="background-color:blue;"></div> 
 
    <div style="background-color:green;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> 
 
    <div style="background-color:red;"></div> 
 
</div>

Answer 2

एचटीएमएल

<div id="green">sdffds dgsdfgsdg sdfgsdfg sdfgsdfg ijhjkhkh lkjlk<div> 

सीएसएस #green {padding:10px} (इसे आकार बदलें) हरे रंग के div पर।