div+css图片横向排列

Question

图片张数不固定，怎样让网页中每行都显示固定张（比如四张）图片？

Answer 1

1、新建html文档。

2、书写hmtl代码。 <!-- 横向排列 -->  ，  <div id="nav">，<div id="box1">1</div>，<div id="box2">2</div>，<div id="box3">3</div>，</div>。

3、初始化css代码。<style>*{margin:0;padding:0;font-size:12px;font-family:'Microsoft YaHei'}，  </style>。

4、书写总体的css代码。

5、代码整体结构。

6、查看效果。

Answer 2

所有的img都设置float:left;然后指定包含img的父div的宽度w,再指定img的宽度为w/4
<style>
.all-img{
width:400px;
margin:0 auto;
border:1px solid red;
}
.all-img img{
float:left;
width:100px;
}
</style>
<div class='all-img'>
<img src='images/label.jpg'/>
<img src='images/label.jpg'/>
<img src='images/label.jpg'/>
<img src='images/label.jpg'/>
<img src='images/label.jpg'/>
<img src='images/label.jpg'/>
<img src='images/label.jpg'/>
<img src='images/label.jpg'/>
<img src='images/label.jpg'/>
<img src='images/label.jpg'/>
</div>本回答被网友采纳

Answer 3

css代码：
ul,li{ padding:0; margin:0; overflow:hidden;}
li{ list-style:none;}
img{ border:0;}
.box{ width:440px;}
.box li{ float:left; width:100px; height:80px; margin-right:10px;}
html代码：
<ul class="box">
<li><img src="aa.gif" width="100" height="80" alt="" /></li>
<li><img src="aa.gif" width="100" height="80" alt="" /></li>
<li><img src="aa.gif" width="100" height="80" alt="" /></li>
<li><img src="aa.gif" width="100" height="80" alt="" /></li>
</ul>

让图片盒子左浮动，根据具体要求算好宽度，有几张图片显示几张图片本回答被提问者采纳