[分享]css两端对齐div

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两端对齐的两种方法，需要根据实际情况选择不同的方式来使用。