Question

我有一个类似桌子的结构。它看起来像这样：

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

当浏览器窗口太小而无法容纳所有三列时，我希望它更改为：

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

值得注意的是，“Info 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;
}

...是的的hackish。

有没有办法在不诉诸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 s
在您想要休息的地方插入一个空元素，并将其显示为table-row。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这是grids like Bootstrap's的设计目标，但您必须满足断点和相对宽度。考虑加载just the grid（14.9KB）。

<div class="container-fluid">
    <div class="row" id="bigtable">
        <div class="col-xs-12 col-sm-6">
            <div>Big column</div>
        </div>
        <div class="col-xs-8 col-sm-4">
            <div>Info 1</div>
        </div>
        <div class="col-xs-4 col-sm-2">
            <div>Info 2</div>
        </div>
    </div>
</div>

<强> Demo

请注意，我在容器上设置了最小宽度，以使Info 2列保持在130px以上。

响应式布局中的相邻元素

2 个答案: