DIV+CSS实现多张图片的布局

html-css031

DIV+CSS实现多张图片的布局,第1张

你好！这个当然是可以的啊。我布局一下给你，你参考一下：

<div style="width:100pxmargin:0px 10px 0px 0pxfloat:left"><img border="0" src="image/1.jpg" width="100" height="110" /></div>

<div style="width:210pxfloat:left">

<div style="width:100pxfloat:left"><img border="0" src="image/2.jpg" width="100" height="50" /></div>

<div style="width:100pxmargin:0px 0px 0px 10pxfloat:left"><img border="0" src="image/3.jpg" width="100" height="50" /></div>

<div style="width:100pxmargin:10px 0px 0px 0pxfloat:left"><img border="0" src="image/4.jpg" width="100" height="50" /></div>

<div style="width:100pxmargin:10px 0px 0px 10pxfloat:left"><img border="0" src="image/5.jpg" width="100" height="50" /></div>

</div>

以上都是按照你图像样式来做的，都是以图片布局形式，你可以参考一下。

希望我的回答能令你满意！

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

     <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>