H5 中让div水平布局两边对齐的三种实现方法

本文主要介绍了div水平布局两边对齐的三种实现方法，分享给大家，具体如下：

方法一

父容器div使用 position: relative;,子div使用 position:absolute;定位，注意边距问题

html

1
2

css

/* 方法一 */
 div-container {
 margin: 10px 0;
 padding: 10px;
 width: 400px;
 border: 2px solid #ccc;
position: relative;
}
.div1 {
 width: 100px;
height: 50px;
border: 2px solid red;
}
.div2 {
 width: 100px;
 height: 50px;
border: 2px solid red;
position: absolute;
 /* 边距设置 */
right: 10px;
top: 10px;
}

方法二 推荐

父容器div使用 display:flex; justify-content:space-between; 即可

html

3
 
4

css

/* 方法二 */
.div-container2 {
margin: 10px 0;
padding: 10px;
width: 400px;
border: 2px solid #ccc;
display: flex;
 justify-content: space-between;
}
.div3 {
width: 100px;
height: 50px;
border: 2px solid red;
}
.div4 {
 width: 100px;
height: 50px;
border: 2px solid red;
}

方法三

父容器div使用display: flex;实现水平排列, 子div设置宽度进行填充占位

html

5
占位div
6

css

  /* 方法三 */
.div-container3 {
margin: 10px 0;
padding: 10px;
width: 400px;
border: 2px solid #ccc;
display: flex;
justify-content: space-between;
 }
.div5 {
width: 100px;
height: 50px;
border: 2px solid red;
}
.div6 {
width: 100px;
height: 50px;
border: 2px solid red;
}
.div7 {
width: calc(100% - 100px - 100px);
height: 50px;
border: 1px solid #ccc;
}

GitHub 完整代码链接