Question

我想我已经知道了这个问题的答案，但我希望也许会有人为此做一些巧妙的伎俩。

我想指定DIV的最小高度，但不是基于px /％。（我知道这听起来很奇怪，但这是出于兼容性原因/响应性）

基本上我希望能够按行数指定它。

我有一个DIVS网格，但里面的元素没有固定，所以一个元素可以有3行，下一个只有2或1行。这会弄乱布局。

基本上，我需要的是这个：

    =====================      =====================      =====================
    Lorem ipsum dolor sit      Lorem ipsum dolor sit      Lorem ipsum dolor sit 
    amet, consectetur          amet, consectetur          amet, consectetur
    adipiscing elit.
    =====================      =====================      =====================

    =====================      =====================      =====================
    Lorem ipsum dolor sit      Lorem ipsum dolor sit      Lorem ipsum dolor sit 
    amet, consectetur          amet, consectetur 
                               adipiscing elit.
    =====================      =====================      =====================

而不是这个：

=====================      =====================      =====================
Lorem ipsum dolor sit      Lorem ipsum dolor sit      Lorem ipsum dolor sit 
amet, consectetur          amet, consectetur          amet, consectetur
adipiscing elit.           =====================      =====================
=====================
                           =====================      =====================
=====================      Lorem ipsum dolor sit      Lorem ipsum dolor sit
Lorem ipsum dolor sit      amet, consectetur          =====================
amet, consectetur          =====================  
adipiscing elit.             
=====================

这种事情可以通过指定“我想要3行”来实现吗？（与像素相反，百分比/ em ??）

编辑我

评论后 -

我真正想要的是FORM元素，INPUT或TEXTAREA，你可以用线条/字符简单地指定高度和宽度！

<TEXTAREA NAME=string, ROWS=n, COLS=n> </TEXTAREA>

很难相信没有人发明过这样的解决方案，让我们所有人都在努力克服PX / em /％计算等等。

Answer 1

为什么你如此反对在ems中设置min-height的想法？如果您在ems中设置line-height，则将其乘以3，即可获得所需的高度！

div {
    line-height:1.5em;
    min-height:4.5em;
    float:left;
    width:33%;/*close enough*/
}

Fiddled

更新：将min-height设置为三行是徒劳的 - 它没有考虑内容不适合可用空间的情况。您可以使用faux columns来使内容在行内看起来具有统一的高度

Answer 2

您应该使用clearfix hack

它将允许您在不指定任何高度的情况下对齐div。它就像一个行分隔符：

=====================      =====================      =====================
Lorem ipsum dolor sit      Lorem ipsum dolor sit      Lorem ipsum dolor sit 
amet, consectetur          amet, consectetur          amet, consectetur
adipiscing elit.           =====================      =====================
=====================      
{clearfix}
=====================      =====================      =====================
Lorem ipsum dolor sit      Lorem ipsum dolor sit      Lorem ipsum dolor sit 
amet, consectetur          amet, consectetur          =====================
=====================      adipiscing elit.
                           =====================

你仍然可以在每个div上设置高度/边距，当然：

编辑：

对于不使用表的内部相同大小，您有几个解决方案：

Using overflow:hidden on the parent and an extra margin-bottom on children if you only use background.

Using display-table attribute (Method 1)

Or using javascript (Method 3)

Answer 3

我使用flexbox和min-height完成了此操作。

在div容器中放置每个flexbox元素，使它们具有相同的高度并做出响应性反应（即使用断点，flexbox wrap和min-width确保超过3行文本的概率很低）。然后，对于每个内部元素，设置{@ 1}}和min-height值，如@ o.v.建议。 line-height应该等于min-height * font-size乘数。

我需要内部段落至少2行高（很可能它们包含1或2行文本，它们包含超过2行文本的可能性很小），所以这就是我最终的结果：

HTML

line-height

CSS

<div class="flex-container">
  <div>
    <p>Lorem ipsum...</p>
    <p>Lorem ipsum...</p>
  </div>
  <div>
    <p>Lorem ipsum...</p>
    <p>Lorem ipsum...</p>
  </div>
</div>

Answer 4

我不知道你为什么要这样..但你可以根据你要使用的字体大小来修复div类的高度和宽度。说你的字体大小是10px，你将使用10 px填充，然后使用50px高度的div ..然后为这些div添加 margin-bottom ，我认为你很好！

css - 行数的最小高度

4 个答案: