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/3宽度和1/2高度。
您可能正在处理旧的CSS问题，宽度和高度基于最后一个非static position ed元素，这意味着这些元素的大小往往不正确。

基于此，这是一个正确的方法：

＆＃13;

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

＆＃13;

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

＆＃13;

百分比已更正，非static的父元素将确保这些百分比反映其大小。对于这个问题，relative基本上只是一个历史悠久的CSS hack。

float实际上指示浏览器尝试在同一行上绘制所有内容，但如果不能，则流向下一行。就像带有自动换行的文字一样。 left和替代right指定浮点数应用的元素的顺序。

使用box-sizing: border-box;还可以为div添加边框，而无需在宽度/高度上执行任何calc，并且尺寸仍能正常工作。

如何在行和列中对齐html div像矩阵一样

2 个答案: