CSS中有许多方法可以实现div两端对齐,本篇文章将会探讨其中的两种方法——float和flexbox。方法一:float.container { width: 100%; overflow: aut
CSS中有许多方法可以实现div两端对齐,本篇文章将会探讨其中的两种方法——float和flexbox。
方法一:float
.container { width: 100%; overflow: auto; } .container .box { float: left; width: 50%; box-sizing: border-box; padding: 10px; }
这种方式需要一个包含两个box的父级元素,并且给父级元素设置 overflow: auto;
进行清除浮动。然后给box设置 float: left;
和 width: 50%;
,使两个box平分父级元素的宽度。
方法二:flexbox
.container { display: flex; justify-content: space-between; } .container .box { flex-basis: 48%; padding: 10px; }
这种方式需要一个包含两个box的父级元素,并且给父级元素设置 display: flex;
。然后给父级元素设置 justify-content: space-between;
,使两个box靠父级元素两端对齐。最后给box设置 flex-basis: 48%;
,使两个box占据父级元素宽度的98%。
以上就是使用CSS实现div两端对齐的两种方法,需要根据实际情况选择不同的方式来使用。
粉丝
0
关注
0
收藏
0