У меня есть серия div, которые содержат небольшой абзац текста. Я хотел бы сделать все div одинаковой высоты и изменить ширину, как требуется, чтобы соответствовать абзацу.
Если бы я делал это в вертикальном направлении, я бы просто установил ширину div. Но если я установлю высоту, абзац превратится в одну строку, сделав рамку максимально широкой.
Как заставить абзац иметь столько строк, сколько позволит высота, а затем увеличить ширину по мере необходимости
Я пытался использовать min-height:100px для абзацев, но оставшаяся высота заполнена пробелом, а текст все еще находится на одной строке.
Вот пример того, что я пытаюсь сделать. Как видите, текст стоит на одной строке. Я бы хотел, чтобы он был заполнен коробкой по вертикали, прежде чем ее расширять.
jsfiddle link: 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;
}