4
私は小さな段落のテキストを含む一連のdivを持っています。私は同じ高さのすべてのdivを作って段落に合うように幅を変えたいと思います。利用可能な最大の高さを使用するように段落を設定する
これを垂直方向に行う場合は、divの幅を設定するだけです。しかし、高さを設定すると段落は1行になり、できるだけ幅の広いボックスになります。高さは、私は段落が、残された高さは、ホワイトスペースとで満たされているためmin-height:100pxを使用してみましたが
テキストは1行に残ります。
ここでは、私がやろうとしていることの一例を示します。あなたが見ることができるように、テキストは1行にとどまっています。箱を広くする前にボックスを垂直にファイルにしたいと思います。
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;
}
あなたはおそらくあなたが強制したい場合は、最大高さの代わりに、最小の高さを使用したいと思うが要素がある値より高くならないようにします。 –
何を試しましたか？コードを投稿するか、フィドルを作成してください（http：// jsfiddle。net） – HerrSerker
これは、テーブルよりも難しいです。たとえば、http://www.positioniseverything.net/articles/onetruelayout/equalheightを参照してください。 – leonbloy