如何對齊divs？

Question

我想對齊6周的div這樣：

1 2 3 
4 5 6 

，但我不知道如何做到這一點，所有的div都按百分比

#folders { 
background: #1abc9c; 
height: 95%; 
width: 15%; 
} 

Answer 1

.folders{ 
 
    height: 150px; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
    align-content: space-around; 
 
    text-align: center; 
 
    background-color: #efefef; 
 
} 
 

 
.folder { 
 
    flex-basis: 30%; 
 
    flex-shrink: 0; 
 
    padding: 10px 0; 
 
    background-color: #1abc9c; 
 
}

<div class="folders"> 
 
    <div class="folder">1</div> 
 
    <div class="folder">2</div> 
 
    <div class="folder">3</div> 
 
    <div class="folder">4</div> 
 
    <div class="folder">5</div> 
 
    <div class="folder">6</div> 
 
</div>

尺寸

Answer 2

看起來你有兩個問題：

1. 根據您描述的內容，您的百分比沒有任何意義。它們應該是1/3寬度和1/2高度。
2. 您可能正在處理一箇舊的CSS問題，該寬度和高度是基於最後一個非編輯元素，這意味着這樣的大小看起來不正確。

此基礎上，這裏是要做到這一點有道：

.div-wrapper 
 
{ 
 
    position: relative; 
 
} 
 

 
.div-wrapper div { 
 
    width: 33.3%; 
 
    height: 50%; 
 
    float: left; 
 
    border: 1px solid black; 
 
    box-sizing: border-box; 
 
}

<div class="div-wrapper"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
    <div>6</div> 
 
</div>

的百分比進行了校正，以及父元素是不可static將確保這些百分比反映其規模。對於這個問題，relative本質上是一個歷史悠久的CSS黑客攻擊。

float本質上指示瀏覽器嘗試將它們全部繪製在同一行上，但如果不能則將其全部繪製到下一個上。就像文字包裝一樣。 left和替代方案right指定了應用浮動元素的順序。

使用box-sizing: border-box;還可以讓您爲div添加邊框，而不必在寬度/高度上執行任何calc，並使尺寸仍然正常工作。