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