Html 使另一个div两侧的div扩展到容器的边缘

展示我想要的东西的最佳方式是展示：

我希望左、右

div

自动扩展到容器div的左、右边缘

它可以通过

Javascript

和

flex

实现，但我想知道是否还有另一种方式支持IE9+（

flex

是IE11+）

---

我用一个动态变化的中心

div创建了这个（单击“RunwithJS”）

（因为“现实生活”问题没有静态大小）

您可以这样实现：

例如：（更改中心宽度$width的变量）

它是一个用于可变用途的sass文件：

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

div.outer {
  width: 100%;
  border: 1px solid gray;
  background-color: rgb(12,34,43);
  text-align: center;
  margin: 0 auto;
  font-size: 0;
}

div.inner {
  border: 1px solid gray;
  height: 200px;
  display:inline-block;
  min-width: 20px;
}

$width: 50%;

#center {
  width: $width;
  background: red;
}

#left,
#right {
  width: ( 100% - $width ) / 2;
  background: yellow;
}

身体
{
背景：#0B222A；
}
外面的
{
宽度：400px；
高度：300px；
背景：#D3EA8F；
保证金：自动；
}
内部的
{
宽度：60%；
高度：300px；
背景：#D3EA8F；
左边框：实心10px#0B222A；
右边框：实心10px#0B222A；
保证金：自动；
}

使用

显示：表格单元格将使您更轻松

演示：

HTML:

<style>
body
{
   background: #0B222A;
}
.outer
{
   width: 400px;
   height: 300px;
   background: #D3EA8F;
   margin: auto;
}
.inner
{
   width: 60%;
   height: 300px;
   background: #D3EA8F;
   border-left: solid 10px #0B222A;
   border-right: solid 10px #0B222A;
   margin: auto;
}

</style>


<div class="outer">
   <div class="inner"></div>
</div>

<div class="outer">
    <div id="left" class="inner"></div>
    <div id="center" class="inner">...</div>
    <div id="right" class="inner"></div>
</div>

body { width: 100%; }
div.outer {
    width: 90%;
    border: 1px solid gray;
    background-color: rgb(12, 34, 43);
    text-align: center;
    display: table;
    border-spacing: 10px;
}
div.inner {
    border: 1px solid gray;
    height: 200px;
    display: table-cell;
    min-width: 20px; width: 20px;
    padding: 4px;
    background-color: rgb(212, 234, 143);
}