css 如何设置几个图片在同一行显示 并且按页面百分比排列 中间间隔一定间隙 美观

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咯