css - 按行数计算的最小高度

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

为什么你如此反对将

min-height

设置为em？如果您以 em 为单位设置了

line-height

，请将其乘以三，即可获得所需的高度！

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

摆弄

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

Answer 2

我通过使用

flexbox

和

min-height

来完成此操作。

将每个

div

元素放在

flexbox

容器中，以使它们具有相同的高度并做出响应响应（即使用断点、flexbox

wrap

和

min-width

来确保拥有超过 3 个的概率文本行数较低）。然后，对于每个内部元素，设置

min-height

和

line-height

值，如 @o.v。建议。

min-height

应等于

font-size

*

line-height

乘数。

我需要内部段落至少有 2 行高（它们很可能包含 1 或 2 行文本，它们包含超过 2 行文本的可能性非常低），所以这是我最终得到了什么：

HTML

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

CSS

div.flex-container {
  display: flex;
}
div.flex-container p {
  font-size: 1em;
  line-height: 1.125; // Default is 1.2, but varies by browser
  min-height: 2.25em; // 2 * 1em * 1.125
                      // (number of lines) * (font-size) * (line-height multiplier)
}

Answer 3

您应该使用 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 的高度/边距：

编辑：

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

如果只使用背景，请在父级上使用

overflow:hidden

，并在子级上额外使用

margin-bottom

。

使用

display-table

属性（方法 1）

或者使用javascript（方法3）

Answer 4

我不知道你为什么想要这个..但是你可以根据你要使用的字体大小来修复 div 类的高度和宽度。 假设你的字体大小是 10 像素，你将使用 10 像素填充，然后使用高度为 50 像素的 div。然后为这些 div 添加 margin-bottom，我想你就可以开始了！

Answer 5

2023 年，是的，您可以使用

height: 1lh;

lh

表示行高：1lh为1行，3lh为3行

行高根据字体大小而变化

浏览器支持正在增强：https://caniuse.com/?search=lh%20unit

这是一个演示：

.one-line {
  height: 1lh;
  background: cyan;
  color: black;
}

.three-lines {
  height: 3lh;
  background: blue;
  color: white;
}

.font-size-sm {
  font-size: 16px;
}

.font-size-lg {
  font-size: 32px;
}

<div class="one-line font-size-sm">1 line small font</div>
<div class="three-lines font-size-sm">3 lines small font</div>

<div class="one-line font-size-lg">1 line large font</div>
<div class="three-lines font-size-lg">3 lines large font</div>