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>