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

html-css024

怎么实现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>

这个方法可以实现，但这个方法比较笨。你可以试试。呵呵。很少做浮动的页面。

<style type="text/css">

*{padding:0margin:0 auto}

body{color:#FFFfont-size:16px}

#one{display:inlinefloat:leftwidth:200pxheight:100pxbackground:#900}

#two{display:inlinefloat:leftwidth:500pxheight:100pxleft:210pxposition:absolutebackground:#000margin-left:10pxmargin-right:10px}

#three{display:inlinefloat:rightwidth:100pxheight:100pxleft:730pxposition:absolutebackground:#650}

</style>

---------------------------------------------------------------上边是css

<div id="one">第一个</div>

<div id="two">第二个</div>

<div id="three">第三个</div>