如何制作具有高度限制的div？答案

【问题标题】：How to make div with height limit?如何制作具有高度限制的div？
【发布时间】：2013-02-06 18:16:38
【问题描述】：

对不起，如果我的英语有错误））。我的问题是如何制作具有高度限制的 div？我的意思是，我的 div 有一些 ul 块，例如：

<div>
 <ul>
  <li>First text</li>
 </ul>
</div>

我的 DIV 的高度为 280 像素。当我尝试添加越来越多的<li>smth...</li> 时，它会越来越低，毕竟我的文本低于我的 div 的高度限制。

不建议浮动：左，这意味着我所有的文字都会在水平线上添加，但我想达到垂直高度限制。像报纸，你知道的。

逻辑：我的文字必须在我的高度限制之前越来越低，在那之后，我的文字必须自己分裂，并继续在新的垂直线上向下移动到同一个 div 元素中。

图片给那些不明白我在说什么的人：

【问题讨论】：

你读过stackoverflow.com/questions/4923/wrapping-lists-into-columns吗？
@Raad 你的目标是正确的
@entonio - 谢谢。我并不害羞——我随时都会投赞成票；）
看到这个问题stackoverflow.com/questions/297686/css-max-height-property
这就是我需要的。非常感谢！！！你真棒。非常感谢您的帮助。

标签： html height

【解决方案1】：

我不确定是否可以在此脚本中加入宽度，但它会允许从列到列的流动。我还注意到这似乎在 IE 中不起作用。

<head>
<style> 
.columnFlow
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;

-moz-column-rule:2px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:4px outset #ff00ff;
}
</style>
</head>
<body>

<div class="columnFlow">
This text will flow within 3 different columns. The only think that I am unsure about is how to get this to work within IE. Also I am not sure how to specifically set the width. It appears as though it even spreads the provided text evenly within the amount of columns that the developer chooses. I hope this helps.
</div>

</body>

在 W3C 网站上还有一些其他版本。我希望这有帮助！ http://www.w3schools.com/css3/css3_multiple_columns.asp

【讨论】：