Question

如何在容器内的内部浮动元素之前进行文本换行？

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

HTML

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

CSS 绿色div #green {padding:10px}（调整大小）。

如何在容器内的内部浮动元素之前进行文本换行

2 个答案: