怎么实现CSS横排图片并列2-4张

html-css09

怎么实现CSS横排图片并列2-4张,第1张

最常用的一种方法：就是浮动,浮动之后会自动往右挤，挤不下就到第二行了。  

     <ul>

           <li>第一张图片</li>

           <li>第二张图片</li>

           <li>第三张图片</li>

           <li>第四张图片</li>

           <li>第五张图片</li>

           <li>第六张图片</li>

           <li>第七张图片</li>

           <li>第八张图片</li>

    </ul>

<style> ul{width:800px height:200px} li{width:195pxheight:98pxmargin:1px auto float:leftlist-style-type:none}

</style>

用定位做，

<div class="box">

<div class="left"></div>

<div class="center"></div>

<div class="right"></div>

</div>

.box{position:relative}

.left{position:absolutetop:0left:0}

.center{position:absolutetop:0left:}

.right{position:absolutetop:0left:0}

中间填写你第一块的宽

或者你用浮动做：

把原图放在一个<div>里，然后在这个<div>里插入一个空<span>标签，然后在css样式里，给这个span加上背景图，这个背景图就是指原图的装饰。

CSS样式如下：注意在div(本例中class命名为grd )的样式里position被设成relative(相对)而在span里position被设成absolute(绝对)；这个非常重要！而其它样式比如：width(宽度)，top(上间距) 都可以根据实际情况来定。

<style type="text/css">.grd { border:1px solid #CECECEpadding:50pxheight:50pxwidth:147pxposition:relative} .grd span{ background: url(/images/hot.gif) no-repeatdisplay: blockposition: absolutewidth: 35pxheight: 58pxtop: 5pxleft:140pxborder: 0px} </style>

有了上面的CSS，HTML可以这样写：

<div class="grd"><span></span><img src="/images/61dh.png" border="0"/></div>