有5个div,怎么自动上3下2的排列,而且间距相同

时间:2021-12-12 18:12:47
最好下面的2个div中间空一个,这样就能和上面的3个div对齐了。

我现在是上面的3个div中,右面最后一个和左面的第一个与页面的左边和右边的距离不同。

我用的是 margin-right: 11%;这样行吗?

6 个解决方案

#1


使用绝对位置。

#2


不是动态的吧?


如果不是的话 你给最外层的DIV设置一个宽度

然后内部的DIV 做float:left; magin-left:10px;

下面的最后一个DIV   margin-left:100px;   假日div的宽度是90的话~

#3



<style type="text/css">
div {
width: 50px;
height:50px;
margin:2px;
background-color:red;
display:inline;
}
</style>
<div style="width:162px;height:102px;background-color:white">
<div></div><div></div><div></div><div></div><div style="margin-left:56px"></div>
</div>

#4


这样的话,最后2个div因为宽度不够,自动挤到下一行了。


而且第1行的第3个div,也不能和第一个div与页面的距离对齐。(我希望第一个div和屏幕左边的距离=第3个div和屏幕右边的距离)

#5


float:left;每个div

#6


浮动会比绝对定位好些。
参考下这个 http://www.w3school.com.cn/css/css_positioning_floating.asp

#1


使用绝对位置。

#2


不是动态的吧?


如果不是的话 你给最外层的DIV设置一个宽度

然后内部的DIV 做float:left; magin-left:10px;

下面的最后一个DIV   margin-left:100px;   假日div的宽度是90的话~

#3



<style type="text/css">
div {
width: 50px;
height:50px;
margin:2px;
background-color:red;
display:inline;
}
</style>
<div style="width:162px;height:102px;background-color:white">
<div></div><div></div><div></div><div></div><div style="margin-left:56px"></div>
</div>

#4


这样的话,最后2个div因为宽度不够,自动挤到下一行了。


而且第1行的第3个div,也不能和第一个div与页面的距离对齐。(我希望第一个div和屏幕左边的距离=第3个div和屏幕右边的距离)

#5


float:left;每个div

#6


浮动会比绝对定位好些。
参考下这个 http://www.w3school.com.cn/css/css_positioning_floating.asp