Question

我有9个div的容器，我想按以下方式排列元素：

它看起来像这样：

其中所有元素将始终为正方形（宽度=高度），我将以容器中的百分比确定它们的大小。在上面的样品中，例如A尺寸（宽度和高度）=宽度的50％，B尺寸= 25％。我还希望每个元素之间有一些约5px的差距。

我的尝试是以下

 _________ ____ ____
| A       | B  | C  |
|         |____|____|
|         | D  | E  |
|_________|____|____|
| F  | G  | H  | I  |
|____|____|____|____|

和css：

    <div id="grid">
        <div class="block big">
        </div>
        <div class="block small">
        </div>
        <div class="block small">
        </div>
        <div class="block small">
        </div>
        <div class="block small">
        </div>
        <div class="block small">
        </div>
        <div class="block small">
        </div>
        <div class="block small">
        </div>
        <div class="block small">
        </div>
    </div>

Answer 1

解决方案成分的关键是一个简单的 float: left 并使用css calc() 函数（幸运的是{{3}考虑将这些像素与百分比混合：

（我还添加了border-box大小调整，因此我用来显示框的边框不会弄乱/使计算复杂化）

* {
  box-sizing: border-box;
}
#grid {
  width: 400px;
  height: 300px;
  border: solid 2px gray;
}
.block {
  min-width: 10px;
  min-height: 10px;
  border: solid 2px blue;
  float: left;
  margin: 5px;
}
.block.big {
  width: calc(50% - 10px);
  height: calc(50%*4/3 - 10px);
}
.block.small {
  width: calc(25% - 10px);
  height: calc(25%*4/3 - 10px);
}

<div class="grid">
  <div id="grid">
    <div class="block big">
    </div>
    <div class="block small">
    </div>
    <div class="block small">
    </div>
    <div class="block small">
    </div>
    <div class="block small">
    </div>
    <div class="block small">
    </div>
    <div class="block small">
    </div>
    <div class="block small">
    </div>
    <div class="block small">
    </div>
  </div>
</div>

排列布局块的最佳方法

1 个答案: