0

使用可能なスペースに応じて、ページ内の div を均等に整理しようとしています。十分なスペースがある場合は、次の行に入る前に div を水平方向に揃える必要があります。タブコンテンツの親 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;
}
4

2 に答える 2

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 */
}
于 2013-03-07T17:52:36.180 に答える
0

次の行に進む前にdivs をインライン (水平) にするには、CSS を使用しますinline-block。

.tab-content .all {
    display: inline-block;
}
于 2013-03-07T17:47:18.030 に答える