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

Question

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

我希望左右div自动扩展到容器div的左右边缘。

可以使用Javascript和flex来完成，但我想知道是否有另一种支持IE9 +的方式（flex是IE11 +）

我创建了这个live demo（点击＆＃34;用JS运行＆＃34;），动态变化的中心div（因为＆＃34;现实生活＆＃34;问题没有＆＃39} ; t有一个静态大小）

Answer 1

使用display: table-cell会让您轻松。

演示：http://jsfiddle.net/abhitalks/VytTX/1/

HTML ：

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

CSS ：

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);
}

Answer 2

你可以这样做：

示例：http://codepen.io/srekoble/pen/rugxh（更改中心宽度$ 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;
}

Answer 3

<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>