2列に配置されたテキストブロックを表示したい順序なしリストがあります。リストには項目が2列に配置されていますが、間隔に一貫性がないことがわかりました。そのため、右側の列のアイテムは、設定したマージンで上下に配置され、左側の列では、2つのアイテムの間に大きなギャップが表示されます。
どうすればこれを修正できますか？私のHTMLは以下の通りです。前もって感謝します。
<html>
<head>test page
<STYLE type="text/css">
.textColumnBox {
padding-top:10px;
float: left;
width: 640px;
padding-bottom: 20px;
}
.moreNews {
padding: 2px 0 5px 0;
width:630px;
display:block;
clear:both;
background-image: url(/images/footer.jpg);
background-repeat: repeat-x;
text-align: right;
-moz-border-radius: 4px;
border-radius: 4px;
}
.newscolumns
{
width: 100%;
overflow: hidden;
vertical-align:top;
}
.newscolumns ul
{
height: 300px;
font-size: 12pt;
vertical-align:top;
margin:2px;
}
.newscolumns ul li
{
padding: inherit;
width: 310px;
display: block;
float: left;
margin-bottom: -4px;
background: red;
vertical-align: top;
}
.newsBox
{
margin-left: 3px;
margin-bottom: 2px;/*changed from 15*/
padding-right: 20px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #4E4629;
}
.newsBox p {
display:block;
font-size: 0.7em;
line-height: 1.2em;
padding-bottom:5px;
}
.newsBox h3 {
line-height: 1.2em;
}
.newsBoxFoot {
display:block;
font-size: 0.7em;
line-height: 1.4em;
color:#999;
}
.newsBox a {
text-decoration:none;
}
.newsBox a:hover {
text-decoration:none;
color:#FFF;
}
</STYLE></head>
<body>
<div class="textColumnBox">
<h1>
Latest News</h1>
<div class="newscolumns">
<ul>
<li>
<div class="newsBox">
<h3>
<a href="#">sample text here qwertyuiowertyuiwertyu</a></h3>
<p>kfdokashfsdhfjhf kjashf kjash fkjsahf saf kjsh fjsakhf kjashf kjsahf kjsahfjksafiksafkashf hsf haskjhf askjhf asjlkh flsakh flskahf lkashf lkashf lksahf lkashf lkashjh as</p>
<div class="newsBoxFoot">20/12/2011 read more</div>
<!-- end .newsBox -->
</div>
</li>
<li>
<div class="newsBox">
<h3>
<a href="#">yasdefghasdfgh sdfgsdfgasdfga dfgsdfgsdf sdfghsdefgh</a></h3>
<p>Pkjhfsdfh skljfhsakjfh asjklhfasljkfh aslkf salkhf laskhf lskahf
lkasflkashfl ksahflk aslfk aslf hsalkf aslkhf laskhf lskahf glksahf
lskahf laskhf lksahf asljkf hsalkhflskahflkh sa</p>
<p>ewreewrewr</p>
<p> </p>
<div class="newsBoxFoot">14/06/2012 read more</div>
<!-- end .newsBox -->
</div>
</li>
<li>
<div class="newsBox">
<h3>
<a href="#">gdfgfdg dfgfdgfgfdgdfg fdgfdgfdgfd gfdgfdgdfdfr</a></h3>
<p>;sdljfs;dlj sd;lfj ds;pl;lsdjg;kdlgkdsflblkjg dlskh gkhkljh kjl.h k.j hgjklsdh g kjdsh g,m hcnxogv;isdhgoiunndkn o;jyhds</p>
<div class="newsBoxFoot">04/04/2012 read more</div>
<!-- end .newsBox -->
</div>
</li>
<li>
<div class="newsBox">
<h3>
<a href="#">dfgfdg dfgdfgdfg fddfg</a></h3>
<p>sd;l;ljd;l sdkjfdskjlsdkjfldksjflsdkjflsdkjf sldkhfdslkhfjkldhf
sdkjhkjh skdjhfkjhkjdhk skdjhkjhkjhoswlhf lkhkljhs kjhkjhkjh
sdklhkjh kh</p>
<div class="newsBoxFoot">14/06/2012 read more</div>
<!-- end .newsBox -->
</div>
</li>
</ul>
</div>
<div class="moreNews">more news</div>
<!-- end .textColumnBox -->
</div>
</body>
</html>