Question

我需要div以动态宽度为中心，两侧各占div占用剩余空间。

| fill remaining space   | dynamically sized |   fill remaining space |

如果文本太长而无法放在一行上，我需要动态调整大小div来换行，但不是这样。

HTML：

<div class="container">
    <div class="side"></div>
    <div class="content">This text should not wrap unless it is too long to fit on one line</div>
    <div class="side"></div>
</div>

我可以使用display: inline-flex;实现所需的行为，如下所示（小提琴here）。

.container {
  display: inline-flex;
  width: 100%;
}
.side {
  flex-grow: 1;
  min-width: 20px;
}
.content {
}

但是，出于兼容性原因，我更倾向于使用display: table;，而我无法让它发挥作用。到目前为止，我的尝试如下（小提琴here）。

.container {
  display: table;
  width: 100%;
}
.side {
  display: table-cell;
  width: 50%;
}
.content {
  display: table-cell;
}

如您所见，content单元格的宽度成为最长单词的宽度。我无法使用white-space: nowrap;，因为即使内容太长而无法放在一行上，它也不会换行。

有没有什么办法可以让display: table;使用它？我也很乐意尝试其他任何合理兼容的东西。

更新我需要content列占用最小空间，因此table-layout: fixed;无法在此工作。

Answer 1

您可能想尝试在.container上设置table-layout: fixed;。你还需要将.side元素的宽度减少到25％，因为你有两个，而不是一个。看看this updated fiddle。

table-layout:fixed将导致流体柱占据固定宽度列留下的空间。查看Chris Coyier的documentation和this article！

拆分两个表格单元格之间的剩余空间

1 个答案: