我正在尝试创建一个标头。 我有一个带有 3 个子div 的父div 容器。 子div 1 是固定的，将向左对齐。 子div 3 是固定的，并将向右对齐。 儿童div 2 的大小可变，适合儿童 1 和儿童 3 之间。 子项 2 的大小将根据浏览器大小而变化(它将扩展和缩小到某个点)。
我希望我的标头与旧版本的IE兼容，至少回到IE版本8。 我正在阅读有关 FLEXBOX 的信息，看起来它甚至不完全兼容没有错误的 I.E. 11。
我正在考虑使用表格，但想知道是否有更好的方法来做到这一点......当我简要测试桌子时，它也没有做我想要的。 我试过了，即使我为每个元素指定了一个宽度，当我缩小浏览器时，子项 1 和子项 3 的大小会发生变化 - 不是我想要的。
谢谢！
对于IE8，您可以考虑使用表格，但这样做的旧方法是使用浮点数。
#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>要强制使用单行，您可以向#child1和#child2添加集合max-width百分比，这些百分比加起来为 100%。
我不太清楚您在尝试使用表格时遇到的问题。你能解释一下问题是什么吗？
您可以尝试使用div 和 CSS 将显示创建为表格。例如，通过这种方式，您可以使用功能查询来查看 flexbox 是否可用并使用它。如果没有，您可以回退到使用下表 CSS。所有这些都无需更改 HTML。
让我知道这是否适合您！
#container{
display: table;
/* use table-layout: fixed if you're
having problems with the content expanding
the fixed cells */
/* table-layout: fixed; */
width: 100%; /* or however big you need it */
}
#row{
display: table-row;
}
#one,
#two,
#three{
display: table-cell;
}
#one{
width: 100px;
background: blue;
}
#two{
width: auto;
background: red;
}
#three{
width: 100px;
background: orange;
}<div id="container">
<div id="row">
<div id="one">Div 1</div>
<div id="two">Div 2</div>
<div id="three">Div 3</div>
</div>
</div>好吧，flexbox 是专门为提供一种 CSS 方法来执行您所描述的操作而创建的，所以这有点像询问如何在不乘法的情况下找到正方形的面积......
在 flexbox 之前，我解决此类问题的首选解决方案是使用 JavaScript 动态调整适当的div(在您的情况下是第二个孩子)的大小。 即使在那时，我真的很不喜欢这个解决方案，因为我认为 JavaScript 不是布局逻辑的好地方，但它是我能想到的最好的解决方案。
我想你可以使用表格，但我认为你会在"单元格"内的布局上遇到古怪的限制。
这是一个解决方案，但它有局限性。您必须知道子项 3 的宽度，并将您的父div 定位为亲戚。
https://jsfiddle.net/whatisthebigpicture/sj9xv9m6/1/
header {
position: relative;
}
div {
outline: 1px solid red;
}
.div1 {
width: 100px;
float: left;
}
.div2 {
margin-right: 100px;
}
.div3 {
width: 100px;
top: 0;
right: 0;
position: absolute;
}