css - 如何在容器内的内部 float 元素之前进行文本换行

Question

如何使文本在容器内的内部 float 元素之前换行？

这是我正在尝试做的...

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>

当我调整屏幕大小时，我希望绿色 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>