0
두 개의 열로 배치 된 텍스트 블록을 표시하려는 정렬되지 않은 목록이 있습니다. 목록은 항목을 두 개의 열로 배치하지만 일관되지 않은 간격이 있음을 알게됩니다. 그래서 오른쪽 열에있는 항목은 내가 설정 한 여백과 함께 하나 아래에 위치하며, 왼쪽 열에는 두 항목 사이에 큰 차이가 나타납니다.정렬되지 않은 목록이 올바르게 레이아웃되지 않음
어떻게 해결할 수 있습니까? 내 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>
Ive는 사람들이 보낸 모든 CSS 수정을 시도했지만 작동하지 않는 것 같습니다 (응답 한 사람들 덕분에). 나는 테이블에 의지해야 할 것 같은데! : – Shaggy