Question

我有一系列包含一小段文字的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;
}

Answer 1

您无法使用CSS。即使在CSS3中也没有任何东西能够原生地支持它。您要求的是width:auto的行为与height:auto类似，但它不会因为自动高度基于线框的概念而没有“列框”这样的东西（因为文字不是网格。）

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

你可以通过检测超过一定高度的盒子然后逐渐使它们更宽，直到它们不能使用javascript来做到这一点。如果javascript不是一个选项，那么我相信你没有选择。

Answer 2

嗨，你只需要给出宽度＆amp;你的css中的高度自动可以根据你的要求正常工作。

查看更新的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/

Answer 3

你应该有这个：

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

未指定宽度。当然，如果您愿意，可以使用id或类轻松替换div和p。

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

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

3 个答案: