css 如何设置几个图片在同义行显示 并且按页面百分比排列 中间间隔一定间隙 美观
百分比控制的话就用下面这个
<html>
<style>
.img-cs{
width:10%;
height:15%;
float:left;
margin-left:20px;
}
</style>
<body>
<img src="img/user-green.jpg" class="img-cs" align="center"/>
<img src="img/user-green.jpg" class="img-cs" align="center"/>
<img src="img/user-green.jpg" class="img-cs" align="center"/>
<img src="img/user-green.jpg" class="img-cs" align="center"/>
</body>
</html>
图片的路径替换成自己本地图片的相对路径
<html>
<body>
<img src="img/user-green.jpg" style="width:50px;height:50px;float:left;margin-left:10px;" align="center"/>
<img src="img/user-green.jpg" style="width:50px;height:50px;float:left;margin-left:10px;" align="center"/>
<img src="img/user-green.jpg" style="width:50px;height:50px;float:left;margin-left:10px;" align="center"/>
<img src="img/user-green.jpg" style="width:50px;height:50px;float:left;margin-left:10px;" align="center"/>
</body>
</html>
这么简单的问题,你先按楼上的做吧,楼上的还有有一定的问题的,看满不满足你说的
css 如何设置几个图片在同一行显示 并且按页面百分比排列 中间间隔一定间隙 美观
几个图片在同一行显示,设置图片样式 float:left
按页面百分比排列,设置图片样式 width:%百分比
中间间隔一定间隙,设置图片样式margin-left或者margin-right的值
注意:几个图片横排显示一行,说明一行width100%,几个图片平均分配一个宽度就好啦,比如五个图片,每个图片的width20%。三个图片显示一行,每个图片的
width显示33%即可。
float 浮动显示可以
楼主的意思是想做个响应式的吧...如果全在一行且用百分比显示,就必须要父级盒子一个最小宽度,不然会很坑的。一般解决响应式问题都是用框架解决的啦。建议楼主看下bootstrap咯