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 */
}

Answer 2

div要在转到下一行之前使s 内联（水平），请使用 CSS inline-block：

.tab-content .all {
    display: inline-block;
}