Question

忘记如何编写div样式表的代码。

多年以来我都没有编码html，而且非常生锈。我正在尝试创建一个响应div样式表，其中第一个div跨整个列，旁边还有2个div。顶部有2个单元格的div，底部有2个单元格的div。

我正在尝试创建看起来像this image的东西。

<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>

Answer 1

使用flexbox。通过将display: flex;分配给.table，.row和.column元素，每个子元素都变得灵活，可以轻松地控制它们以占用占空间的一定百分比。表，然后像表一样填充所有可用空间。

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>

需要帮助来创建表格。 DIV

1 个答案: