5

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

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

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

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

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

jsfiddle 链接：http: //jsfiddle.net/Kj49B/

<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;
}
4

3 回答 3

2

你不能使用 CSS。即使在原生支持这一点的 CSS3 中，我也没有遇到过任何事情。你所要求的只是这样的width:auto行为，height:auto但它不会，因为自动高度基于行框的概念，并且没有“列框”之类的东西（因为文本不是网格）。

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

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

于 2012-03-26T00:13:58.320 回答
1

嗨，您只需要在您的 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/

于 2012-03-26T05:13:46.167 回答
-1

你应该有这个：

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

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

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

于 2012-03-25T22:42:10.143 回答