Html 根据页面上的可用空间组织div

我试图根据可用空间均匀地组织页面中的div。如果有足够的空间，我需要在进入下一行之前将div水平对齐。我可能在tab content parent div下有很多div。有什么办法可以做到这一点吗？我插入了html和css

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;
}   

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;
}   

---

要在转到下一行之前使

div

s内联（水平），请使用CSS

inline块

：

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;
}   

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

---

您应该使父容器的宽度灵活，以使用页面上的所有可用空间（不是更多，也不是更少）：

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;
}   

---

提供一些示例内容，让我们了解这些元素的用途如何？看起来好像是表格数据。。。