css - 使居中的 div 填充宽度

Question

我有 3 个 div 的情况，其中第一个和第三个 div 有宽度。我希望第二个 div 填满剩余的空间。

小提琴：http: //jsfiddle.net/YzUQy/

#div1{
    height:auto;
    text-align:center;
    width:290px;
    left:0;
    float:left;
    border: 1px solid #ccc;
}

#div2{
   float:left;
    overflow: scroll;
    border: 1px solid #ccc;
}

#div3{
    width: 420px;
    border: 1px solid #ccc;
    right:2px;
    padding:10px;
    float:right;
}

Answer 1

使用display:table和display:table-cell：http: //jsfiddle.net/YzUQy/4/

CSS：

#div1{
    height:auto;
    text-align:center;
    width:290px;
    left:0;
    border: 1px solid #ccc;
}

#div2{
    overflow: scroll;
    border: 1px solid #ccc;
}

#div3{
    width: 220px;
    border: 1px solid #ccc;
    right:2px;
    padding:10px;
}

#container{
    display: table;
    width:700px;
}

#container > div{
    display:table-cell;
}

Answer 2

您可以使用calc()：

#div2{
    float:left;
    overflow: scroll;
    border: 1px solid #ccc;
    width: calc(100% - 420px - 20px - 6px - 290px); 
    /* 100% - div3 width - div3 padding - borders - div1 width */
}

JSFiddle

浏览器支持：caniuse

Answer 3

你需要这个：（以及未来的参考）

http://www.dynamicdrive.com/style/layouts/category/C13/

特别是，你需要这个链接：http ://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/

HTML

<div class="content-wrapper">
   <div class="content">
</div>
<div class="left"></div>
<div class="right"></div>

CSS

.content-wrapper {
  float: left;
  width: 100%;
}
.content {
  margin: 0 200px 0 230px; /* set to the widths of right and left columns */
}
.left {
  float: left;
  width: 230px;
  margin-left: -100%;
  background: #C8FC98;
}
.right {
  float: left;
  width: 200px;
  margin-left: -200px;
  background: #FDE95E;
}

Answer 4

您可以像这样使用中心元素的绝对定位：

http://jsfiddle.net/9eGVA/

#container {
    position:relative;
}

#div1{
    height:auto;
    text-align:center;
    width:290px;
    left:0;
    float:left;
    border: 1px solid #ccc;
}

#div2{
   position:absolute;
    overflow: scroll;
    border: 1px solid #333;
    left:292px; /* total width of div1 */
    right:442px; /* total width of div2 */
}

#div3{
    width: 420px;
    border: 1px solid #ccc;
    right:2px;
    padding:10px;
    float:right;
}

总宽度是指包括填充和边框（除非你使用你不在这里的边框规范）

Answer 5

您可以使用弹性布局。这是一个小提琴：http: //jsfiddle.net/fred02138/JDqQu/

<div id="outer">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
</div>

CSS：

#outer {
    display: -webkit-flex;
   -webkit-flex-direction: row;
    display: flex;
    flex-direction: row;
    width: 100%;    
}

#div1{
    height:auto;
    text-align:center;
    width:290px;
    left:0;
    border: 1px solid #ccc;
}

#div2{
    overflow: scroll;
    border: 1px solid #ccc;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
}

#div3{
    width: 420px;
    border: 1px solid #ccc;
    right:2px;
    padding:10px;
}