Question

我的网页上有3个div，水平相邻。中间的是固定大小。我希望其他人填满页面上的剩余空间。

我制作了这个代码片段，这是我的问题的简化版本：

＆＃13;

#left {
  background: red;
  float: left;
}
#middle {
  background: blue;
  margin-left: auto;
  margin-right: auto;
  width: 500px;
}
#right {
  background: green;
  float: right;
}

＆＃13;

<div id='right'>groen</div>
<div id='left'>rood</div>
<div id='middle'>fixed px blauw</div>

＆＃13;

我无法使用百分比，因为中间div具有固定的大小。

左右div应各自具有(100%-1170px)/2

的宽度

是否有一种简单的方法可以让css填满额外的空间？或者，如果这不是一个选项，那么可以通过编程方式进行选择吗？

Answer 1

演示 - http://jsfiddle.net/mpsrcmgg/1/

您可以将table布局display:table用于父级，将display:table-cell用于子级，但您需要更改html标记

＆＃13;

.cont {
  display: table;
  width: 100%;
}
.cont div {
  display: table-cell;
}
#left {
  background: red;
}
#middle {
  background: blue;
  margin-left: auto;
  margin-right: auto;
  width: 500px;
}
#right {
  background: green;
}

＆＃13;

<div class="cont">
  <div id='right'>groen</div>
  <div id='middle'>fixed px blauw</div>
  <div id='left'>rood</div>
</div>

＆＃13;

Answer 2

尝试使用表格属性：
HTML

<div class="container">
    <div id='right'>groen</div>
    <div id='middle'>fixed px blauw</div>
    <div id='left'>rood</div>
</div>

CSS

.container{
    display:table;
    width:100%;
}
.container>div{display:table-cell;}
#left {background: red;}
#middle {
  background: blue;
  width: 500px;
}
#right {background: green;}

DEMO

Answer 3

试试这个： CSS

#left {
  background: red;
  float: left;
  width: calc(50% - 250px); /* <-- added this line */
}
#middle {
  background: blue;
  margin-left: auto;
  margin-right: auto;
  width: 500px;
}
#right {
  background: green;
  float: right;
  width: calc(50% - 250px); /* <-- and this line */
}

HTML

<div id='right'>groen</div>
<div id='left'>rood</div>
<div id='middle'>fixed px blauw</div>

DEMO

CSS - 3 div，1，固定大小，其他填充空间

3 个答案: