如何对齐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，并使尺寸仍然正常工作。