如何在对面的顶部和底部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>