网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发  > css

css如何实现6张图片均匀排列在一行?

2021/2/28 21:10:01

css部分如下:img{width:120px; height:80px;float:left;margin-right:16px;}.img3{margin-right:0;}html部分如下:<img src="images/001.jpg" /><img src="images/002.jpg" /><img src="images/003.jpg" /><img src=…

css部分如下:

img{width:120px; height:80px;float:left;margin-right:16px;}
.img3{margin-right:0;}


html部分如下:

<img src="images/001.jpg" />
<img src="images/002.jpg" />
<img src="images/003.jpg" />
<img src="images/004.jpg" />
<img src="images/005.jpg" />
<img src="images/006.jpg" class="img3" />


说明:

图片总宽度 120×6=720

剩余间距 800-720=80

6张图5个间距,每个80÷5=16

样式中img将6张图均设置右边距(margin-right)16px,总间距16×6=96

总间距超出剩余间距16,故单独在第6张图上加样式margin-right:0;清除右间距


相关资讯

    暂无相关的数据...