Question

我正在一个仪表板上工作，该仪表板上有几个容器，这些容器的高度或宽度是其他元素的两倍。

这很好的直接做这个与好的ol＆＃39;像这样的表：Fiddle

<table cellspacing="4">
  <tr>
    <td rowspan="2"></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td rowspan="2"></td>
  </tr>
  <tr>
    <td colspan="2"></td>
  </tr>
</table>

然而，列表项float：left;似乎很难让容器以我期望的方式相互缠绕。

我应该像我的例子中那样使用表格，还是有一个干净的解决方案，不需要大量的工作？我很幸运，只需要支持Chrome。

Answer 1

我实际上想要使用flexbox执行此操作，但我现在要设置基于float的解决方案：

section {
display: block;
width: 128px;
padding: 4px 0 0 4px;
background-color: rgb(191,191,191);
}

div {
float: left;
display: inline-block;
width: 40px;
height: 40px;
margin: 0 2px 2px 0;
background-color: rgb(0,0,0);
vertical-align: top;
}

.x2 {
width: 82px;
}

.y2 {
height: 82px;
}

.right {
float: right;
margin: 0 4px 2px 0;
}

section::after {
content: '';
display: block;
width: 2px;
height: 2px;
clear: both;
}

<section>
<div class="y2"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="y2 right"></div>
<div class="x2"></div>
</section>

用双高度元素填充网格

1 个答案: