Div horizontal layout aligned on both sides

Method 1

Parent container div Use position: relative;, Son div Use position:absolute; location , Pay attention to the margin

html

<div class="div-container">
  <div class="div1">1</div>
  <div class="div2">2</div>
</div>

Copy

css

/*  Method 1  */
.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;
  /*  Margin setting  */
  right: 10px;
  top: 10px;
}

Copy

Parent container div Use display:flex; justify-content:space-between; that will do

html

<div class="div-container2">
  <div class="div3">3</div>
  <div class="div4">4</div>
</div>

Copy

css

/*  Method 2  */
.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;
}

Copy

Method 3

Parent container div Use display: flex; Achieve horizontal arrangement , Son div Set the width to fill the space

html

<div class="div-container3">
  <div class="div5">5</div>
  <div class="div7"> placeholder div</div>
  <div class="div6">6</div>
</div>

Copy

css

/*  Method 3  */
.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;
}

Copy

GitHub Full code link https://github.com/gywgithub/exercise01/blob/master/div-flex/index.html