float
浮动，所以可以用
display:
inline-block
来代替它，当然你也可以用table来布局。用两个
display:inline-block
的块元素，并设定它们的宽度：width:49%
就可以实现一栏两列的布局了。
我这写了个简单的，你要根据你的需要改动。我实现的是，有5张图，每次只显示一张图片，点按钮切换。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">
<style type="text/css">
body{ margin:0font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif}
ul{margin:0padding:0list-style:none}
#imgList{ width:100pxheight:100px/* 定义显示窗口的大小 */
border:1px solid #000overflow:hidden}
#imgList ul{ width:500px} /* 定义全部图片的宽度和,这里有5张，每张宽100px,总宽度就是500px */
#imgList li{ width:100pxheight:100pxfloat:left} /* 单张图片的所在位置的大小，宽度就是图片宽度加左右边距 */
#imgList img{ width:90pxheight:90pxmargin:5px} /* 单张图片的尺寸，及外边距 */
</style>
<script>
function move(to){
var imgList = document.getElementById("imgList")
if(to == "left") imgList.scrollLeft += 100//li的宽度
else imgList.scrollLeft -= 100//li的宽度
}
</script>
</head>
<body>
<!-- 请使用以下html结构 -->
<div id="imgList">
<ul>
<li><img src="Photoshop CS4.png">
<li><img src="Photoshop CS4.png">
<li><img src="Photoshop CS4.png">
<li><img src="Photoshop CS4.png">
<li><img src="Photoshop CS4.png">
</ul>
</div>
<!-- 这个可以自己定义，把事件copy过去就行了 -->
<input type="button" value="left" onClick="move('left')">
<input type="button" value="right" onClick="move('right')">
</body>
</html>
<style type="text/css"><!--
*{padding:0margin:0}
img{border:0display:block}
BODY {
PADDING-RIGHT: 0pxPADDING-LEFT: 0pxFONT-SIZE: 12pxPADDING-BOTTOM: 0pxMARGIN: 0px autoCOLOR: blackLINE-HEIGHT: 150%PADDING-TOP: 10pxBACKGROUND-COLOR: whiteTEXT-ALIGN: center
}
.dis {
DISPLAY: block
}
.undis {
DISPLAY: none
}
#cntR {
WIDTH: 302px
}
#NewsTop {
CLEAR: bothMARGIN-BOTTOM: 16px
}
#NewsTop P {
FLOAT: leftLINE-HEIGHT: 21px
}
#NewsTop P.topTit {
FONT-WEIGHT: boldWIDTH: 117px
}
#NewsTop P.topC0 {
BACKGROUND: #dcdcdcBORDER-LEFT: #f2f2f2 1px solidWIDTH: 40pxCURSOR: pointer
}
#NewsTop P.topC1 {
BACKGROUND: #c2130eBORDER-LEFT: #f2f2f2 1px solidWIDTH: 40pxCOLOR: #fff
}
#NewsTop #NewsTop_tit {
BORDER-BOTTOM: #c2130e 3px solidHEIGHT: 21px
}
#NewsTop #NewsTop_cnt {
PADDING-LEFT: 32pxBACKGROUND: url(http://www.popuni.com/attachments/month_0703/o2007320133249.gif) no-repeat 12px 13pxLINE-HEIGHT: 26pxPADDING-TOP: 7pxHEIGHT: 260pxTEXT-ALIGN: left
}
#NewsTop #NewsTop_cnt A {
COLOR: #666TEXT-DECORATION: none
}
#NewsTop #NewsTop_cnt A:hover {
COLOR: #c2130eTEXT-DECORATION: underline
}
-->
</style>
<DIV id="cntR" style="float:leftdisplay:blockclear:both">
<DIV id="NewsTop">
<DIV id="NewsTop_tit">
<P class="topTit">新闻排行</P>
<P class="topC0">国内</P>
<P class="topC0">国际</P>
<P class="topC0">社会</P>
<P class="topC0">网评</P>
</DIV>
<DIV id="NewsTop_cnt">
<SPAN title="Don't delete me"></SPAN>
<SPAN>
<A href="#" target=_self>新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A><BR>
<div align="right"><A href="#" target=_self>...more</A></div>
</SPAN>
<SPAN>
<A href="#" target=_self>美华裔女兵在营房上吊死亡军方介入调查(图)</A><BR>
<div align="right"><A href="#" target=_self>...more</A></div>
</SPAN>
<SPAN>
<A href="#" target=_self>最高法:承诺不判赖昌星死刑没有超越法律程序</A><BR>
<div align="right"><A href="#" target=_self>...more</A></div>
</SPAN>
<SPAN>
<A href="#" target=_self>铁道部回应吴敬琏质疑:春运不涨价将长期坚持</A><BR>
<div align="right"><A href="#" target=_self>...more</A></div>
</SPAN>
</DIV>
<SCRIPT>
var Tags=document.getElementById('NewsTop_tit').getElementsByTagName('p')
var TagsCnt=document.getElementById('NewsTop_cnt').getElementsByTagName('span')
var len=Tags.length
var flag=1//修改默认值
for(i=1i<leni++){
Tags[i].value = i
Tags[i].onmouseover=function(){changeNav(this.value)}
TagsCnt[i].className='undis'
}
Tags[flag].className='topC1'
TagsCnt[flag].className='dis'
function changeNav(v){
Tags[flag].className='topC0'
TagsCnt[flag].className='undis'
flag=v
Tags[v].className='topC1'
TagsCnt[v].className='dis'
}
</SCRIPT>
</DIV>
</DIV>
