jquery - html 中的 Sideway 内容溢出

Question

我有以下情况，有一个 div，我正在向其中动态添加内容。到目前为止，如果添加的内容太多，它会溢出到 div 之外或拉长 div。这两种情况都是我所不希望的。

我想要做的是在单独的列中溢出侧面的内容。我为此使用了 bootstrap 流体柱，但即使是不依赖 bootsrap 的解决方案也会对我有好处。

我的最后一个选择是将代码封装在一堆 if 和 else 中，并将内容相应地放入两列中，但我认为可能有一个更简单的解决方案来解决这个问题。

谢谢

这是所要求的jsfiddle http://jsfiddle.net/eak4e/1/

some compulsory code

Answer 1

一种解决方案(IE10+)是 CSS 列。这是一个小 fiddle http://jsfiddle.net/wkr7X/

div.text-columns-three
{
 /*Shamless copy of: http://compass-style.org/examples/compass/css3/columns/*/
  -webkit-column-count: 3;
  -moz-column-count: 3;
  -ms-column-count: 3;
  -o-column-count: 3;
  column-count: 3;
  width: 300px;
  margin-bottom: 20px;

    height: 300px;
}

有一些有趣的属性，例如column-break-inside

更新:这是一个使用不同显示类型的简短实验:http://jsfiddle.net/wkr7X/1/似乎可以使用 block 元素，只要内容不是一个 block 而是分成多个实体