尝试在 CSS 中像表格一样布局 div答案

【问题标题】：Trying to layout divs in CSS like table尝试在 CSS 中像表格一样布局 div
【发布时间】：2019-01-27 00:45:32
【问题描述】：

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

表格：768px 宽 1024px 高
第 1 行：56 像素高
单元格 1：宽 56 像素单元格 2：宽 600 像素单元格 3：宽 112 像素
第 2 行：912 高
单元格 1：宽 56 像素单元格 2：宽 600 像素单元格 3：宽 112 像素
第 3 行：56 像素高
单元格 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>，但这也不起作用。

对我做错了什么有什么建议吗？

【问题讨论】：

使用float 代替display: css-tricks.com/all-about-floats

标签： html css-tables

【解决方案1】：

这是一个使用divs 创建可自定义表格的选项

.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;
}

【讨论】：