两个div怎么成功实现水平布局两边对齐？教你几个办法

发布时间：2023-07-21 13:55:00 所属栏目：语言来源：

导读： 两个div怎么实现水平布局两边对齐？我们做网页设计时，有些需求需要两个div在两边对齐，那么要怎么写呢？有哪些实现方法？下面我们一起来看看。

本文主要介绍了div水平布局两边对齐的三种实现方法，分享

两个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-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;

}

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!