Methods a

The parent container div uses position: relative; , child divs use position: Absolute; Position, pay attention to margin issues

html

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

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 Settings */
  right: 10px;
  top: 10px;
}
Copy the code

Method 2recommended

The parent div uses display:flex; justify-content:space-between; Can be

html

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

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 the code

Methods three

The parent div uses display: flex; Horizontal arrangement, child div set width to fill space

html

<div class="div-container3">
  <div class="div5">5</div>
  <div class="div7">Placeholder div</div>
  <div class="div6">6</div>
</div>
Copy the code

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 the code

GitHub complete code link

Github.com/gywgithub/e…