Html css - 按行数计算的最小高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11151728/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css - min height by number of lines
提问by Obmerk Kronen
I think I already know the answer to this one, but i hope maybe someone will have a some neat trick for that .
我想我已经知道了这个问题的答案，但我希望也许有人会对此有一些巧妙的技巧。
I want to specify a min-height of a DIV , but not px / % based . (I know it sounds strange , but it is for compatibility reasons / responsiveness)
我想指定一个 DIV 的 min-height ，但不是 px / % based 。（我知道这听起来很奇怪，但这是出于兼容性原因/响应能力）
Basically I want to be able to specify it by number of lines .
基本上我希望能够按行数指定它。
I have a grid of DIVS , but the elements inside are not fixed, so one element can have 3 lines, and the next one only 2 or 1 line . this messes up the layout .
我有一个 DIVS 网格，但是里面的元素不是固定的，所以一个元素可以有 3 行，下一个只有 2 或 1 行。这搞乱了布局。
Basically , what I need is THIS :
基本上，我需要的是这个：
===================== ===================== =====================
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.
===================== ===================== =====================
and NOT this :
而不是这个：
===================== ===================== =====================
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.
=====================
can this sort of thing can be achieved by specified "I want 3 lines" ? (As opposed to pixels, percentage / em ??)
这种事情可以通过指定的“我想要3行”来实现吗？（相对于像素，百分比/em ??）
Edit I
编辑我
After comments -
评论后——
What I really want is something like the FORM elements , INPUT or TEXTAREA where you can simply specify the height and width by lines / characters !
我真正想要的是像 FORM 元素、INPUT 或 TEXTAREA 之类的东西，您可以在其中简单地按行/字符指定高度和宽度！
<TEXTAREA NAME=string, ROWS=n, COLS=n> </TEXTAREA>
It is hard o believe that no one has invented such a solution and left us all to struggle with PX / em / % calculations and the likes ..
很难相信没有人发明了这样的解决方案，让我们所有人都在 PX / em / % 计算等问题上苦苦挣扎..
采纳答案by zessx
You should use a clearfix hack
你应该使用clearfix hack
It will allow you to get your divs aligned without specifying any height. It's like a line separator :
它将允许您在不指定任何高度的情况下对齐 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.
=====================
You still can set height / margin on each div, of course :
当然，您仍然可以在每个 div 上设置高度/边距：
EDIT :
编辑 ：
For an internal equal size without using tables, you've got several solutions :
对于不使用表的内部相等大小，您有几种解决方案：
Using overflow:hiddenon the parent and an extra margin-bottomon children if you only use background.
如果您只使用背景overflow:hidden，则在父项上使用，在子项上额外margin-bottom使用。
Using display-tableattribute (Method 1)
回答by o.v.
Why are you so opposed to the idea of setting min-heightin ems? If you have line-heightset in ems, multiply that by three and you got your desired height!
为什么你如此反对min-height在 em中设置的想法？如果你已经line-height设置了 em，把它乘以三，你就会得到你想要的高度！
div {
line-height:1.5em;
min-height:4.5em;
float:left;
width:33%;/*close enough*/
}
Update: setting min-height to three lines is an exercise in futility - it does not account for scenarios where content does notfit into the space available. You could use faux columnsinstead to make content appear to be of uniform height within the row
更新：将 min-height 设置为三行是徒劳的 - 它不考虑内容不适合可用空间的情况。您可以使用假列来使内容在行内看起来具有统一的高度
回答by dignoe
I accomplished this by using flexboxand min-height.
我通过使用flexbox和完成了这一点min-height。
Have each of your divelements within a flexboxcontainer to get them to have the same height and react responsively (i.e. use breakpoints, flexbox wrap, and min-widthto ensure that the probability of having more than 3 lines of text is low). Then for each of your internal elements, set the min-heightand line-heightvalues like @o.v. suggested. min-heightshould equal font-size* line-heightmultiplier.
将每个div元素放在一个flexbox容器中，使它们具有相同的高度并做出响应（即使用断点、 flexboxwrap并min-width确保文本超过 3 行的概率很低）。然后对于您的每个内部元素，像@ov 建议的那样设置min-height和line-height值。min-height应该等于font-size*line-height乘数。
I needed the internal paragraphs to be at least 2 lines high (there is a high probability that they would contain 1 or 2 lines of text, with a very low probability that they would contain more than 2 lines of text), so this is what I ended up with:
我需要内部段落至少有 2 行高（它们很可能包含 1 或 2 行文本，极低概率包含超过 2 行文本），所以这就是我结束了：
HTML
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
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)
}
回答by Praveen Puglia
I dont know why would you want that..but you could fix the height and width of the div class according to the size of the font you are gonna use. say your font size is 10px and you are gonna use 10 px padding then use divs with 50px height.. then add a margin-bottomto those divs and you are good to go i think!
我不知道你为什么想要那个..但是你可以根据你要使用的字体的大小来修复 div 类的高度和宽度。说你的字体大小是10px的，你会使用10像素填充，然后使用的div 50像素高度..然后添加边距那些div的，你是好去，我认为！
