Question

我正在尝试遵循最佳做法，并且不使用表格，但我正在尝试使用div设置固定宽度的表格布局。

表：768px宽1024px高
第1行：56px高
  电池1：56px宽电池2：600px宽电池3：112px宽
第2行：912高
  电池1：56px宽电池2：600px宽电池3：112px宽
第3行：56px高
  电池1：56px宽电池2：600px宽电池3：112px宽

我在CSS中正确设置了第一行：

section { display: table; width: 768px;}
div { display: table-cell; height:56px; border: 1px solid #000;} /* height:56px; */
#top_gutter { width:56px; height:56px; }
#title { width:600px; height:56px; }
#top_margin { width:112px; height:56px; }

但后续行无法正确显示。我尝试了很多不同的方法，但我没有看到我做错了什么。我已尝试设置<section2>和<div2>，但这也不起作用。

有关我做错的任何建议吗？

Answer 1

以下是使用div s

创建可自定义表格的选项

.cell {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 1px solid black;
  border-radius: 3px;
}

<div class="table">
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

在此示例中，您可以对此结构应用自己的约束，例如，如果要为整个表宽度设置768px，则可以通过以下方式完成：

.table {
    width: 768px;
}

或者为奇数行设置高度40px：

.row:nth-child(2n+1) {
    height: 40px;
}

尝试在CSS中布局div，如表格

1 个答案: