css - 响应式布局中的相邻元素

Question

我有一个类似表格的结构。它看起来像这样:

┌───────────────────────┬───────────┬────────┐
│Big column             |Info 1     |Info 2  |
╞═══════════════════════╪═══════════╪════════╡
┊......                 ┊...        ┊...     ┊
└───────────────────────┴───────────┴────────┘

当浏览器窗口太小放不下所有三列时，我希望它变成这样:

┌───────────────────────┐
│Big column             |
├──────────────┬────────┤
│Info 1        |Info 2  |
╞══════════════╧════════╡
┊......                 ┊
├──────────────┬────────┤
┊...           ┊...     ┊
└──────────────┴────────┘

值得注意的是，“信息 2”或多或少固定了定义的最大宽度 (130px)

在第一种情况下，整体布局是使用 display: table/table-row/table-cell 实现的，但我为第二种情况找到的唯一解决方案感觉很老套。

.cell:first-child {
    display: block;
}
.cell:nth-child(2) {
    display: inline-block;
    width: calc(100% - 130px);
    box-sizing: border-box;
}
.cell:last-child {
    display: inline-block;
    width: 130px;
    box-sizing: border-box;
}

... 是的。骇人听闻。

有没有一种方法可以在不使用 calc() 的情况下实现这一点？我已经尝试过 float，但“信息 1”单元格折叠到最小宽度以适合其内容，或者“信息 2”单元格在下方下降一行，这两种方法都不起作用。

编辑: HTML，根据要求，是微不足道的:

<div id="bigtable">
    <div class="row">
        <div class="cell">Big column</div>
        <div class="cell">Info 1</div>
        <div class="cell">Info 2</div>
    </div>
    <!-- ... -->
</div>

Answer 1

你可以用这个技巧强制换行:

• 将行显示为 table-row-group 而不是 table-row
• 在你想要中断的地方插入一个空元素，并将其显示为table-row。

但是，您希望第一行中的单元格与下一行中的两个单元格具有相同的宽度。这无法通过 CSS 表格实现，但您可以使用 HTML 表格和 colspan 属性。

这将正确显示。但是，使用 colspan="2" 为每行的第一个单元格设置样式是表模型错误，因为有一列没有单元格。如果您不喜欢验证错误，您可以添加一个没有 colspan="2" 的额外行，并使用 CSS 隐藏它。该行应至少包含两个单元格以避免错误，或者恰好包含 4 个单元格以避免警告。

#bigtable {
  border-collapse: collapse;
}
#bigtable tr {
  display: table-row-group;
}
#toggler:checked ~ #bigtable script {
  display: table-row;
}
#bigtable [hidden] {
  display: none;
}
/* Optional */ #bigtable tr { border: 3px solid; } #bigtable td { border: 1px solid; }

<input type="checkbox" id="toggler" />
<label for="toggle">Toggle table style</label>
<table id="bigtable">
  <tr>
    <td colspan="2">Big column</td>
    <script hidden></script>
    <td class="cell">Info 1</td>
    <td class="cell">Info 2</td>
  </tr>
  <tr>
    <td colspan="2">A</td>
    <script hidden></script>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td colspan="2">Foo</td>
    <script hidden></script>
    <td>Bar</td>
    <td>Baz</td>
  </tr>
  <tr hidden><td></td><td></td><td></td><td></td></tr>
</table>