html - 如何使用 CSS 将文本从一个框流到另一个框

Question

我有几个html框

<div class="parent">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

用CSS定义

.box{
width : 200px;
height : 300px;
display :  block;
float : left
}

有没有办法在父 DIV 中提供日志文本，并使用 CSS 在子 DIV 中流动文本？还是应该用 Javascript 来完成？

当然，在哪里提供文本并不重要，我只想将多余的文本流到下一个框。

Answer 1

将您的 HTML 更改为包含内容的单个元素，例如:

<div class="parent">
  <div class="box"></div>
</div>

然后添加这些样式规范:

.box {
   -moz-column-count: 3;
   -webkit-column-count: 3;
   column-count: 3;
   height: 10em; /* Or whatever height is appropriate. */
}

有关 CSS 列的更多信息，请参阅 http://css-tricks.com/snippets/css/multiple-columns/或 https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts#The_columns_shorthand .