html - 根据页面可用空间组织div

Question

我试图根据可用空间均匀地组织页面中的 div。如果有足够的空间，我需要在进入下一行之前水平对齐 div。我可能在 tab-content 父 div 下有许多 div。有什么想法可以实现吗？我插入了 html 和 css。

html 看起来像这样:

<div class="tab-content" id="tabs4">
   <div id="total_mem" class="all"> </div>
   <div id="total_cpu" class="all"> </div>
   <div id="total_disk" class="all"> </div>
   <div id="total_read" class="all"> </div>
   <div id="total_io" class="all"> </div>

My outer div's css looks like this:

.tab-content {   
width: 1400px;   
border: solid 1px #aaa;   
text-align: center;   
font-size: 20px;   
letter-spacing: 35px;   
white-space: nowrap;   
line-height: 12px;   
overflow: hidden; 
text-align: center;
}   

Answer 1

您应该使父容器的宽度灵活，以用完页面上的所有可用空间(不多也不少):

.tab-content {
    width: 100%;
}
.tab-content > div {
    box-sizing: border-box;
    float: left;
    width: 20%; /* Might have to adjust, depends on how many divs you want on each line */
}