Question

我想知道是否可以仅使用div标签和css来创建大约下面的表布局。

_________________________________________________
|           |                       |            |
|           |                       |            |
|           |                       |            |
|___________|_______________________|____________|
|      |       |                |                |
|      |       |                |                |
|      |       |                |                |
|______|_______|________________|________________|
|           |                       |            |
|           |                       |            |
|           |                       |            |
|___________|_______________________|____________|

我遇到的主要问题是第二行。有4个单元格抛出第一行的宽度，有3个单元格。这是我的HTML：

<div class="box-table" style="width: 800px">
    <div class="box-row">
        <div class="box" style="width: 20%"></div>
        <div class="box"style="width: 45%"></div>
        <div class="box" style="width: 35%"></div>
    </div>
    <div class="box-row">
        <div class="box" style="width: 15%">></div>
        <div class="box" style="width: 15%">></div>
        <div class="box" style="width: 40%">></div>
        <div class="box" style="width: 30%">></div>
    </div>
    <div class="box-row">
        <div class="box" style="width: 20%"></div>
        <div class="box"style="width: 45%"></div>
        <div class="box" style="width: 35%"></div>
    </div>
</div>

我的CSS：

.box-table {
   display: table;
   border-collapse: collapse;
}

.box-table .box-row {
   display: table-row;
}

.box-table .box {
   display: table-cell;
   text-align: left;
   vertical-align: top;
   padding: 5px;
}

这是可能的，还是我需要将每一行都放到一个单独的表中？谢谢，并感谢它。

Answer 1

因为每行应该只包含相同数量的表格单元格。您可以在除第二行之外的其他行上使用colspan，但您需要将div布局更改为表格布局，这是您不想要的。

Answer 2

一些事情：

在您的box类中填充会导致换行。删除它是因为它为框添加了额外的宽度（而是在div中为div添加填充）。
将float：left添加到.box类

Answer 3

是的，可以 - DEMO

.box-table {
  outline: 1px solid #c00;
  overflow: hidden;
  width: 800px;
}

.box-table .box-row {
  display: block;
}

.box-table .box {
  outline: 1px solid #ccc;
  display: inline-block;
  float: left;
  text-align: left;
  vertical-align: top;
  padding: 0;
  height: 2em;
}

div表每行不同的单元格

3 个答案: