我有一系列的 div，其中包含一小段文本。我想让所有的 div 具有相同的高度，并根据需要改变宽度以适应段落。
如果我要在垂直方向上执行此操作，我只需设置 div 的宽度。但如果我设置高度，段落就会变成一行，使框尽可能宽。
如何强制段落具有高度允许的行数，然后根据需要增加宽度
我尝试过使用min-height:100px对于段落，但剩余的高度被空白填充，并且文本仍然在一行上。
这是我正在尝试做的一个例子。正如您所看到的，文本保持在一行上。我想在使盒子变宽之前先将盒子垂直锉平。
jsfiddle链接：http://jsfiddle.net/Kj49B/ 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;
}
你不能使用CSS。即使在 CSS3 中，我也没有遇到过任何本身支持此功能的东西。你要求的是width:auto表现得像height:auto但它不会，因为自动高度基于行框的概念，并且不存在“列框”之类的东西（因为文本不是网格）。
具有固定高度单元格的表格是您能得到的最接近的表格，但您在上面的评论中说它们由于其他原因不适合您。即使如此，您也会发现行为并不是特别一致或易于控制。
您可以使用 javascript 来完成此操作，方法是检测超过特定高度的框，然后逐渐使它们变宽，直到不超过特定高度。如果 javascript 也不是一个选项，那么我相信你别无选择。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
