[分享]css两个盒子两端对齐怎么设置

CSS中，要让两个盒子进行对齐，需要使用一些技巧来实现，下面我们来看一下如何设置。首先，我们需要设置两个盒子的宽度，然后将它们都设置成浮动元素。.box1, .box2 { width: 100px;...

CSS中，要让两个盒子进行对齐，需要使用一些技巧来实现，下面我们来看一下如何设置。

首先，我们需要设置两个盒子的宽度，然后将它们都设置成浮动元素。

.box1, .box2 {
   width: 100px;
   float: left;
} 

当我们这样设置后，两个盒子将会并排显示。但是，它们之间会有一些空隙，这是因为它们的宽度加起来并没有占满父元素的宽度。

接下来，我们需要使用CSS3中的flex布局来实现对齐。我们将父元素设置成弹性盒子，并设置 justify-content 为 space-between。

.parent {
   display: flex;
   justify-content: space-between;
} 

这样设置后，两个盒子就会分别置于父元素的两端，实现了对齐。

需要注意的是，这种方法需要CSS3的支持，对于一些低版本浏览器，可能会存在兼容性问题。