HTML/CSS最佳水平對齊一個div

Question

林在followinig工作中的元素的方法：需要

在右側部分（黃色BG）的內容被「堆疊」內的水平排列右側部分。

什麼是解決此問題的最佳/最簡單的方法？

1. 我可以使用高度百分比的div嗎？
2. 我應該使用利潤率和負利潤率嗎？
3. 我應該爲正確的部分內的每一條內容創建單獨的div嗎？

任何幫助，實例或資源，大加讚賞

Answer 1

使用flexbox

.outer { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.inner { 
 
    padding: 20px 0; 
 
    background: red; 
 
    margin: 5px; 
 
} 
 

 
.inner.nr1, 
 
.inner.nr2 { 
 
    width: 80%; 
 
} 
 
.inner.nr3, 
 
.inner.nr4, 
 
.inner.nr5 { 
 
    width: 25%; 
 
}

<div class="outer"> 
 
    <div class="inner nr1"> 
 
    </div> 
 
    <div class="inner nr2"> 
 
    </div> 
 
    <div class="inner nr3"> 
 
    </div> 
 
    <div class="inner nr4"> 
 
    </div> 
 
    <div class="inner nr5"> 
 
    </div> 
 
</div>