Html 每行的列数不同

我没有使用标记，因此无法使用colspan属性

我想创建一个表，第一行有三个单元格，最后一行有一个单元格，其他行有两个单元格

以下是我的代码（最少）：

HTML:

aaaa
bbbbb
ccccc
DDD
eeeee
fffff
ggggg
最后一个细胞

---

这就是我得到的（我无法发布图像）：

您正试图模拟一个带有div的表。为什么？

标签正是针对这种表格数据而设计的。

我将按如下方式构建此布局

对于HTML：

<div class="parent">
     <div class="row r3">
            <div class="cell">aaaa</div>
            <div class="cell">bbbbb</div>
            <div class="cell">ccccc</div>
      </div>
      <div class="row r2">
            <div class="cell">ddddd</div>
            <div class="cell">eeeee</div>
      </div>
      <div class="row r2">
            <div class="cell">fffff</div>
            <div class="cell">ggggg</div>
      </div>
      <div class="row r1">
            <div class="cell">last cell</div>
      </div>
</div>

对于每个宽度为100%的

div.row

块元素，使用

display:table

您不需要显式定义CSS表行，将根据需要匿名创建一行

见参考资料：

---

请参见演示：

同意，但这不是答案。您应该将其作为注释发布。无论如何，您可以使用一个包含3个列表的列表，其中元素具有固定维度。您的行可以是

display:block

，您的单元格

display:inline block

谢谢，我不知道“匿名行”。）不客气，请参阅添加的有关匿名框的参考资料。

<div style="display: table;">
     <div class="row" style="width: 100%;">
            <div class="cell" style="width: 33% !important;">
                aaaa
            </div>
            <div class="cell" style="width: 33% !important;">
                bbbbb
            </div>
            <div class="cell" style="width: 33% !important;">
                ccccc
            </div>
      </div>
      <div class="row" style="width: 100%;">
            <div class="cell" style="width: 50% !important;">
                ddddd
            </div>
            <div class="cell" style="width: 50% !important;">
                eeeee
            </div>
      </div>
      <div class="row" style="width: 100%;">
            <div class="cell" style="width: 50% !important;">
                fffff
            </div>
            <div class="cell" style="width: 50% !important;">
                ggggg
            </div>
      </div>
      <div class="row" style="width: 100%;">
            <div class="cell" style="width: 100% !important;">
                last cell
            </div>
      </div>
</div>

<div class="parent">
     <div class="row r3">
            <div class="cell">aaaa</div>
            <div class="cell">bbbbb</div>
            <div class="cell">ccccc</div>
      </div>
      <div class="row r2">
            <div class="cell">ddddd</div>
            <div class="cell">eeeee</div>
      </div>
      <div class="row r2">
            <div class="cell">fffff</div>
            <div class="cell">ggggg</div>
      </div>
      <div class="row r1">
            <div class="cell">last cell</div>
      </div>
</div>