中心灵活的div与弹性相邻div

Question

我需要两个灵活宽度div之间的灵活div宽度，如下所示：

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

这是棘手的部分：我的中间部分需要像这样反应：

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

但是，#left和#right需要显示并占用剩余空间，如下图所示：

作为参考，我的页眉和页脚的宽度与#middle相同。

（NOT）尝试失败{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％宽度宽度最大宽度为中心

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开始的点）并用{{1}改变了侧边栏的宽度} query：

@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); } } 数学运算，因此可能有更好的方法来进行计算，但总而言之，它可以运行。没有桌子。