如何在对面的顶部和底部div之间插入一个div？

Question

我想将div放在左下角div之间。每个宽度必须为40％。我试图在没有Javascript的情况下这样做。

#left_col,#right_col,#bottom {
    width: 40%;
    height:200px;
    float:left;
    clear:left;
    padding: 0;
    border: #0BDC00 solid 2px;
}
#right_col{
   float:right;
   clear:right;
   text-align: right;
   display:table-cell;
}

Answer 1

而不是使用clear:left和clear:right代替使用clear:both;

#left_col,#right_col,#bottom {
    width: 40%;
    height:200px;
    float:left;
    clear:both;
    padding: 0;
    border: #0BDC00 solid 2px;
}
#right_col{
   float:right;
   clear:both;
   text-align: right;
   display:table-cell;
}

Fiddle

Answer 2

*,
*:before,
*:after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  background-color: #F72F4E;
}

.Container {
  width: 600px;
  padding: 20px;
  border: 1px solid #000;
}

.Row {
  display: flex;
}

.Row:nth-of-type(odd) {
  justify-content: flex-start;
}

.Row:nth-of-type(even) {
  justify-content: flex-end;
}

.Row__item {
  width: 40%;
  background: #000;
  height: 60px;
}

<div class="Container">
  <div class="Row">
    <div class="Row__item">
      
    </div>
  </div>
  <div class="Row">
    <div class="Row__item">
      
    </div>
  </div>
  <div class="Row">
    <div class="Row__item">
      
    </div>
  </div>
</div>