Question

我正在尝试根据可用空间均匀地组织页面中的div。如果有足够的空间，我需要div进行水平对齐才能进入下一行。我可能在tab-content parent 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内联（水平），请使用CSS inline-block：

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

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

2 个答案: