强制段落使用可用的最大高度答案

【问题标题】：Force paragraph to use the maximum height available强制段落使用可用的最大高度
【发布时间】：2012-04-09 11:37:15
【问题描述】：

我有一系列包含一小段文本的 div。我想使所有高度相同的 div 并根据需要改变宽度以适应段落。

如果我要在垂直方向上执行此操作，我只需设置 div 的宽度。但是，如果我设置高度，则段落变成一条线，使框尽可能宽。

如何强制段落的行数与高度允许的一样多，然后根据需要增加宽度

我已经尝试在段落中使用min-height:100px，但是剩余的高度被空白填充并且文本仍然在一行上。

这是我正在尝试做的一个例子。如您所见，文本停留在一行上。我想让它在使盒子变宽之前垂直归档盒子。

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<ul class="container">
    <li class="item">
        <a href="" class="title"  target="_blank">Title 1</a>
        <br/>
        <p>A summit aimed at reducing the risk of nuclear terrorism and involving some 50 countries is about to open in South Korea's capital, Seoul</p>
    </li>
    <li class="item">
        <a href="" class="title"  target="_blank">A long title</a>
        <br/>
        <p>Watch the latest news summary from BBC World News. International news updated 24 hours a day</p>
    </li>
    <li class="item">
        <a href="" class="title"  target="_blank">A much much longer title</a>
        <br/>
        <p><img src="http://www.montrealgazette.com/6355281.bin" align="left"/>Freshly crowned NDP leader Thomas Mulcair has vowed to make Prime Minister Stephen Harper's Tories his main adversary and he moved quickly to assure his own party that there won't be a housecleaning of staff</p>
    </li>
    <li class="item">
        <a href="" class="title"  target="_blank">A long title that goes on and on until it is very very long</a>
        <br/>
        <p>Pope Benedict XVI condemns drug-trafficking and corruption at a huge open-air Mass in central Mexico as part of his first visit to the country</p>
    </li>       
</ul>
</body>
</html>

这是与之配套的 CSS：

body
{
    font-family:sans-serif;
}

.container
{
    width:95%;
    margin-left:auto;
    margin-right:auto;
    align:center;
}

.item
{
    margin-left:auto;
    margin-right:auto;
    display:inline-block;
    color:#000033;
    font-size:14px;
    height:180px;
    line-style:none;
    float:left;
    margin:20px;
    padding:20px;
    vertical-align:middle;
    border:1px solid #000033;
    border-radius: 50px; /*w3c border radius*/

    -webkit-border-radius: 50px; /* webkit border radius */
    -moz-border-radius: 50px; /* mozilla border radius */
}

.title
{
    color:#000033;
    text-decoration:none;
    font-size:22px;
    margin:0px;
    padding:0px
    line-height:1;
}

img
{
    height:90px;
    margin: 5px;
}

p
{
    display:block;
    margin:5px;
    width:minimum;
    padding:0px;
    min-height:80px;
    line-height:1.2;
    word-wrap:true;
}

【问题讨论】：

如果您想强制元素不高于某个值，您可能需要使用 max-height 而不是 min-height。
你已经尝试了什么？发布一些代码或创建一个小提琴 (jsfiddle.net)
这是最困难的（也就是说，没有表格）。参见例如positioniseverything.net/articles/onetruelayout/equalheight
我已经添加了代码。我认为表格不会起作用，因为如果重新调整浏览器窗口的大小，我希望框下拉到新行上。
相关：stackoverflow.com/questions/15227350/…

标签： html css paragraph

【解决方案1】：

您不能使用 CSS。即使在本机支持此功能的 CSS3 中，我也没有遇到过任何情况。您要求的是 width:auto 的行为类似于 height:auto 但它不会因为自动高度基于行框的概念并且没有“列框”之类的东西（因为文本不是一个网格）。

具有固定高度单元格的表格是您将获得的最接近的表格，但您在上面的评论中说由于其他原因它们不适合您。即使这样，您也会发现行为不是特别一致或易于控制。

您可以使用 javascript 来做到这一点，方法是检测超过特定高度的框，然后逐渐使它们变宽，直到它们没有。如果 javascript 也不是一个选项，那么我相信你没有选择。

【讨论】：

感谢您的帮助。我想这可能就是我要达到的目的。我将尝试使用 javascript 方法。
我个人会选择另一种设计。由于浏览器需要在每次调整页面大小后重新计算页面，因此 javascript 方法的成本必然很高。由于您还有多个框，如果浏览器尝试在更改之间重绘，这将导致加载时间长、cpu 使用率高和潜在的闪烁。如果您考虑一下，这可能有助于解释为什么没有对此的本机支持。如果您坚持要尝试从最小宽度开始并增大增量（例如 20px 或其他值）。
我又看了一遍。当浏览器重新调整大小时，这些框会跳到新的一行，因此它们本身不需要重新调整。最后我只是根据段落中的字符数调整了宽度，并在服务器端根据需要添加了类。

【解决方案2】：

您好，您只需在您的 css 中提供 width & height auto 即可根据您的要求正常工作。

查看更新后的 CSS：-

body
{
    font-family:sans-serif;
}

.container
{
    width:auto;
    margin-left:auto;
    margin-right:auto;
    align:center;
}

.item
{
    margin-left:auto;
    margin-right:auto;
    display:inline-block;
    color:#000033;
    font-size:14px;
    line-style:none;
    float:left;
    margin:20px;
    padding:20px;
    height:auto;
    vertical-align:middle;
    border:1px solid #000033;
    border-radius: 50px; /*w3c border radius*/
    -webkit-border-radius: 50px; /* webkit border radius */
    -moz-border-radius: 50px; /* mozilla border radius */
}

.title
{
    color:#000033;
    text-decoration:none;
    font-size:22px;
    margin:0px;
    padding:0px
    line-height:1;
}

img
{
    height:90px;
    margin: 5px;
}

p
{
    display:block;
    margin:5px;
    width:minimum;
    padding:0px;
    line-height:1.2;
    word-wrap:true;
    height:auto;
}

或者看小提琴：- http://jsfiddle.net/Kj49B/7/

【讨论】：

【解决方案3】：

你应该有这个：

div {max-height:100px;}
p {height:100%;}

不指定宽度。当然，如果您愿意，您可以轻松地将 div 和 p 替换为 id 或类。

我的答案可能无效，因为我在发布此答案后看到了您的代码示例。我会把它留在这里，以防它可能有帮助。

【讨论】：

这并不能阻止段落在一行中展开。我想让它包裹文本，这样它就占据了盒子的整个高度。