HTML+CSS 中的动态 3 列布局：侧列相等且最大，中间列最小且驱动布局？

Question

我想要一个三列布局，完全动态（无固定宽度），其中左右列的宽度相等，并且在它们之间展开以填充所有可用的 space after 中间栏的宽度已达到容纳其内容所需的宽度。换句话说，我希望中间列是动态的并驱动宽度，我希望它在页面上居中并且其内容的宽度最小，我希望两侧列的宽度和最大宽度相等，给定中间列的宽度。

在实践中，中间列的宽度会变小，想象一下像“and”或“or”这样的小词，位于两个大小相等且与其内容无关的框之间。

理想情况下，我希望能够用三个连续的元素进行编码：

<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>

这样我就可以轻松折叠狭窄布局（如移动设备）上的布局，使其垂直放置 div 一个在另一个下方。

有什么想法吗？我对这看起来有多么困难感到惊讶，我想知道答案是否如此简单以至于我只是有一个随机空白而没有看到它，或者这是否真的很棘手。

Answer 1

如果你用 'display:flex' 将三个 div 放在一个容器中，你可以实现我认为你想要的。

只需给 'left' 和 'right' 一个 'width: 100%' ，这样它们就可以以相同的比例尽可能地伸展，中间的只根据需要变大。（如果你想要不同时间的另一个比率 - 也许右边的应该是左边的两倍 - 只需输入 100% 和 200% 宽度 - 宽度可能大于 100% 并且这样很容易计算比率)

请注意，如果您有多个单词，这些行就会断开。为了防止这种情况，我将 'flex-shrink: 0' 放在中间一个（替代方案是 'white-space: nowrap'）。如果只是一个字或者换行是你想要的，你甚至可以留下这些。

#wrapper {
  display: flex;
}

#wrapper>* {
  border: 1px solid teal;
}

.left,
.right {
  width: 100%;
}

#middle {
  flex-shrink: 0;
  /* white-space: nowrap; */
}

<div id="wrapper">
  <div class="left"></div>
  <div id="middle">two words</div>
  <div class="right"></div>
</div>

这将是使用 'display:grid'

的替代方法

max-content 使列尽可能大而不换行 whitespace（所以如果有两个词，它们保持在同一行）

将外部列设置为 1fr 使它们大小相同，并且都尽可能多地占用 space

#wrapper {
  display: grid;
  grid-template-columns: 1fr max-content 1fr;
}

#wrapper>* {
  border: 1px solid teal;
}

<div id="wrapper">
  <div class="left"></div>
  <div id="middle">two words</div>
  <div class="right"></div>
</div>

HTML+CSS 中的动态 3 列布局：侧列相等且最大，中间列最小且驱动布局？

Dynamic 3 Column Layout in HTML+CSS: Side Columns Equal & Maximal, Middle Column Minimal & Driving the Layout?

html

css

multiple-columns