div+css图片横向排列

html-css011

div+css图片横向排列,第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:0padding:0font-size:12pxfont-family:'Microsoft YaHei'},  </style>。

4、书写总体的css代码。

5、代码整体结构。

6、查看效果。

<style>

.img-wrap{

width:300px

border:1px solid #336699

}

img{

float:left

width:92px

height:70px

}

</style>

<div class='img-wrap'>

<img src=''>

<img src=''>

<img src=''>

<img src=''>

<img src=''>

</div>

通过设置.img-wrap 宽度来显示一行图片个数

你这明显是图片路径不对, 你自己看下html里的图片路径

<img src="picture/1-xxxxx.jpg">

检查下这个picture目录下是否有对应名称的图片