CSS实现三列图片等宽等间距布局
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | 每个图片块左浮动,宽30%,左外边距2.5%: 100%=(2.5%+30%)+(2.5%+30%)+(2.5%+30%)+2.5% <! DOCTYPE html> < html > < head > < meta charset="utf-8"> < meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"> < title >三列图片等宽布局</ title > < style > * { margin: 0; padding: 0; } img { display: block; width: 30%; margin: 2.5% 0 0 2.5%; float: left; } </ style > </ head > < body > < div > < img src="byd.jpg" />< img src="byd.jpg" />< img src="byd.jpg" /> < img src="byd.jpg" />< img src="byd.jpg" />< img src="byd.jpg" /> < img src="byd.jpg" />< img src="byd.jpg" />< img src="byd.jpg" /> </ div > </ body > </ html > 简单实用的 百分比布局 还是很适合手机WAP页面布局的: min-width:320px; max-width:420px; width:100%; overflow-x: hidden; margin: 0 auto; 最小宽度320px,最大宽度420px,在320px和420px之间自动适应宽度,看起来还行. 在< img >标签里只用设置width属性百分比值,比如width="40%",不用设置height属性,这样图片能够自行按原比例缩放. 容器里面的块,同样可以用百分比布局,比如左边的60%,右边的40%. |
CSS实现三列图片等宽等间距布局
基本信息
浏览数: 1308
分享时间: 2 months ago
每个图片块左浮动,宽30%,左外边距2.5%:
100%=(2.5%+30%)+(2.5%+30%)+(2.5%+30%)+2.5%
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
<title>三列图片等宽布局</title>
<style>
* {
margin: 0;
padding: 0;
}
img {
display: block;
width: 30%;
margin: 2.5% 0 0 2.5%;
float: left;
}
</style>
</head>
<body>
<div>
<img src="byd.jpg" /><img src="byd.jpg" /><img src="byd.jpg" />
<img src="byd.jpg" /><img src="byd.jpg" /><img src="byd.jpg" />
<img src="byd.jpg" /><img src="byd.jpg" /><img src="byd.jpg" />
</div>
</body>
</html>
简单实用的 百分比布局 还是很适合手机WAP页面布局的:
min-width:320px;
max-width:420px;
width:100%;
overflow-x: hidden;
margin: 0 auto;
最小宽度320px,最大宽度420px,在320px和420px之间自动适应宽度,看起来还行.
在<img>标签里只用设置width属性百分比值,比如width="40%",不用设置height属性,这样图片能够自行按原比例缩放.
容器里面的块,同样可以用百分比布局,比如左边的60%,右边的40%.
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步