38

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

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

基本上我希望能够通过行数来指定它。

我有一个 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 / % 计算等而苦苦挣扎..

4

4 回答 4

34

你为什么这么反对min-height在ems中设置的想法？如果你line-height设置了 em，乘以 3，你就得到了你想要的高度！

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

摆弄

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

于 2012-06-22T07:59:18.473 回答
8

我通过使用flexboxand实现了这一点min-height。

将每个div元素放在一个flexbox容器中，以使它们具有相同的高度并做出响应（即使用断点、flexboxwrap并min-width确保拥有超过 3 行文本的可能性很低）。然后为您的每个内部元素设置min-height和line-height值，如@ov 建议的那样。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)
}
于 2016-08-15T22:05:50.207 回答
6

你应该使用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属性（方法一）

或使用 javascript (方法 3)

于 2012-06-22T07:23:02.007 回答
0

我不知道你为什么想要那个..但是你可以根据你要使用的字体的大小来修复 div 类的高度和宽度。说你的字体大小是 10 像素，你将使用 10 像素的填充然后使用 50 像素高度的 div .. 然后在这些 div 中添加一个边距底部，我认为你很高兴！

于 2012-06-22T07:24:48.467 回答