Jon*_*n L 5 html css paragraph
我有一系列 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;
}
小智 -1
你应该有这个：
div {max-height:100px;}
p {height:100%;}
保留未指定的宽度。当然，如果您愿意，您可以轻松地将 div 和 p 替换为 ids 或类。
我的答案可能无效，因为我在发布此答案后看到了您的代码示例。我会把它留在这里，以防它有帮助。