html - 具有 flex 相邻div的居中灵活div

Question

我需要在两个灵活宽度的 div 之间有一个灵活的 div 宽度，像这样:

<div id="main">
    <div id="left"></div>
    <div id="middle"></div>
    <div id="right"></div>
</div>

这是棘手的部分:我的中间部分需要像这样使用react:

#middle {
    width: 90%;
    margin: 0 auto;
    max-width: 96em;       /* +/- 960px */
    padding: 0 30px;
}

然而，#left和 #right需要可见并占用剩余空间，如下图所示:

作为引用，我的页眉和页脚的宽度将与 #middle 相同.

(不)尝试失败{0}

之所以这样称呼，是因为我没有(也不会)使用 <table>结构原因显而易见。 (虽然 Failed attempt 2 是相同逻辑的 CSS 等价物。)

失败的尝试 1

#main { position: relative; }
#left {
    position: absolute;
    left: 0;
    width: 35%; /* arbitrary width for dev. purposes */
    width: calc(35% - 30px); /* arbitrary width for dev. purposes */
}
#middle {
    width: 90%;
    max-width: 96rem;
    margin: 0 auto
}
#right {
    position: absolute;
    right: 0;
    width: 35%; /* arbitrary width for dev. purposes */
    width: calc(35% - 30px); /* arbitrary width for dev. purposes */
}

问题: #middle 之间没有保持恒定的间距和 #left/#right在窗口调整大小(快速替代多个设备宽度)

失败的尝试 2

#main { display: table-row; /* also tried display: table; */ }
#left, #right, #middle { display: table-cell; }

问题:不允许 #middle以 90% 宽度 width max-width 为中心

Answer 1

您可以使用 calc() 和 float 来做到这一点。看这个fiddle .

如果你把你的 html 改成这样，中间的 div 放在最后:

<div id="main">
    <div id="left"></div>
    <div id="right"></div>
    <div id="middle"></div>
</div>

...然后将您的 css 更改为:

#main {  
height:100%;
background:aqua;
}

#left {
float:left;
background:black;
height:100%;
width:9%;
width: -webkit-calc(10% - 30px);
width: -moz-calc(10% - 30px);
width: calc(10% - 30px);
}

#right {
float:right;
background:black;
height:100%;
width:9%;
width: -webkit-calc(10% - 30px);
width: -moz-calc(10% - 30px);
width: calc(10% - 30px);
}

#middle {
width: calc(90% - 60px);
max-width: 960px;
margin: 0 auto;
background:white;
height:100%;
}

为了适应最大宽度，因为它改变了百分比计算，我找到了断点(浏览器开始使用 max-width 的点)并改变了侧边栏的宽度@media 查询:

@media all and (min-width : 1134px) {

#left, #right{
    width: -webkit-calc(((100% - 960px) / 2) - 30px);
    width: -moz-calc(((100% - 960px) / 2) - 30px);
    width: calc(((100% - 960px) / 2) - 30px);
}
}

内边距的宽度仍然有一点点变化，因为它是使用百分比计算的。我很快地完成了 calc() 数学运算，因此可能有更好的计算方法，但总而言之，它是有效的。没有 table 。