两个div怎么实现水平布局两边对齐？教你几个方法
发布时间：2022-04-18 14:24:34 所属栏目：语言 来源：互联网
导读：两个div怎么实现水平布局两边对齐？我们做网页设计时，有些需求需要两个div在两边对齐，那么要怎么写呢？有哪些实现方法？下面我们一起来看看。 本文主要介绍了div水平布局两边对齐的三种实现方法，分享给大家，具体如下： 方法一 父容器div使用 position: r
|
两个div怎么实现水平布局两边对齐？我们做网页设计时，有些需求需要两个div在两边对齐，那么要怎么写呢？有哪些实现方法？下面我们一起来看看。 本文主要介绍了div水平布局两边对齐的三种实现方法，分享给大家，具体如下： 方法一 父容器div使用 position: relative;,子div使用 position:absolute;定位，注意边距问题 html <div class="div-container"> <div class="div1">1</div> <div class="div2">2</div> </div> 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 <div class="div-container2"> <div class="div3">3</div> <div class="div4">4</div> </div> 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 <div class="div-container3"> <div class="div5">5</div> <div class="div7">占位div</div> <div class="div6">6</div> </div> css 以上三种方法都能实现div水平布局两边对齐，本文有具体的代码及介绍，大家可以参考参考，希望对大家学习有帮助。 （编辑：济南站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
