时间戳

首页 > 解决方案 > 需要帮助创建表。分区

html - 需要帮助创建表。分区

问题描述

忘记如何编写 div 样式表。

我已经好几年没有编写过 html 代码了，而且很生疏。我正在尝试创建一个响应式 div 样式表，其中第一个 div 跨越整个列，旁边还有 2 个 div。一个顶部有 2 个单元格的 div 和一个跨越底部 2 个单元格的 div。

我正在尝试创建看起来像这张图片的东西。

<div class="table">
  <div class="row">
    <div class="cell">cell 1</div>
</div>
<div class="row">
    <div class="cell">cell 1</div>
    <div class="cell">cell 2</div>
</div>
<div class="row">
    <div class="cell colspan">
        <div><div>
            cell 3
        </div></div>
    </div>
    <div class="cell"></div>
</div>

标签： htmlcss

解决方案

使用弹性盒。通过分配display: flex;给.table、.row和.column元素，每个子元素都变得灵活，并且可以很容易地被控制以占据表格中特定百分比的空间，并像表格一样增长以填充所有可用空间。

该flex物业需要一点时间来适应。在这里，我使用它来告诉 flex 项目增长（第一个值，flex-grow）和起始宽度（第三个值，flex-basis）。这个资源很容易理解：https ://css-tricks.com/snippets/css/a-guide-to-flexbox/

* { box-sizing: border-box; }

.table,
.row,
.column {
  display: flex;
}

.column {
  flex: 1 0 50%;
  flex-direction: column;
}

.first-column {
  flex-basis: 33%;
}

.cell {
  flex: 1 0 100%;
  padding: 20px;
  border: 1px solid dodgerblue;
}

.first-row .cell {
  border-left: none;
}

.second-row .cell {
  border-top: none;
  border-left: none;
}
<div class="table">
  <div class="column first-column">
    <!-- just the one cell in this column -->
    <div class="cell">cell 1</div>
  </div>
  
  <div class="column">
    <!-- need 2 rows here -->
    <div class="row first-row">
      <!-- first row will have 2 columns -->
      <div class="column">
        <div class="cell">cell 2</div>
      </div>
      <div class="column">
        <div class="cell">cell 3</div>
      </div>
    </div>
    <div class="row second-row">
      <div class="cell">cell 4</div>
    </div>
  </div>
</div>

推荐阅读