html - 除了 FLEXBOX 之外，如何在网站上的单行中将可伸缩元素放在两个固定大小的元素之间？

Question

我正在尝试创建标题。我有一个带有 3 个子 div 的父 div 容器。子 div 1 是固定的，将向左对齐。子 div 3 是固定的，将向右对齐。 Child div 2 的大小可变，将适合 Child 1 和 Child 3 之间。Child 2 的大小会根据浏览器大小而变化(它会扩展和收缩到某个点)。

我希望我的 header 与旧版本的 IE 兼容，至少回到 I.E。版本 8。我正在阅读有关 FLEXBOXes 的信息，看起来它甚至与 I.E 不完全兼容。 11 个没有错误。

我正在考虑使用表格，但想知道是否有更好的方法来做到这一点...因为我简要地测试了表格，但它也没有按照我的要求进行。我试过了，即使我为每个元素指定了宽度，当我缩小浏览器时，子 1 和子 3 的大小也会发生变化——这不是我想要的。

谢谢!

Answer 1

在 IE8 中，您可以考虑表格，但这样做的旧方法是使用 float 。

#wrapper {
  overflow: hidden; /* Establish BFC */
}
#child1 {
  float: left;
  width: 200px;
  background: yellow;
}
#child3 {
  float: right;
  width: 150px;
  background: pink;
}
#child2 {
  overflow: hidden; /* Establish BFC */
  background: cyan;
}

<div id="wrapper">
  <div id="child1">Child 1</div>
  <div id="child3">Child 3</div>
  <div id="child2">Child 2</div>
</div>

要强制执行单行，您可以将 set max-width 百分比添加到 #child1 和 #child2 中，加起来为 100%。