如何在容器內的內部浮動元素之前進行文本換行

Question

如何在容器內部的內部浮動元素之前進行文本換行？

這裏就是我試圖做...

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。沒有flexbox可能嗎？

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

HTML

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

CSS #green {padding:10px}（調整大小）在綠色div上。