Question

我有<div>水平居中，为960px（宽度）。我在右侧有第二个<div>，在左侧有第三个。{/ p>

我希望两侧的div可以占用所有可用空间减去居中div的960像素。我在右侧成功获得了div（overflow: hidden）。但是我在左侧的div失败了。

<div id="left">leftt</div>
<div id="center">center</div>
<div id="right">right</div>

<style>
#center{
    width: 960px;
    float: left;
    height: 300px;
    background-color: #bbb;
}
#left{
    float: left;
    height: 300px;
    background-color: #ccc;
    width: ?;
}
#right{
    float: left;
    height: 300px;
    background-color: #ddd;
    width: ?;
}

<style>

这是我想要的。 http://i.stack.imgur.com/CgdLo.png

Answer 1

使用css表（IE8支持它们 - caniuse）

<强> FIDDLE

1）在容器div上设置display:table

2）在子div上设置display:table-cell

3）在中间div上设置min-width:960px，在div上设置width:50%

CSS

.container
{
    display: table;
    width: 100%;
}
#center{
    min-width: 960px;
    height: 300px;
    background-color: #bbb;
    display: table-cell;
}
#left{

    height: 300px;
    background-color: #ccc;
    display: table-cell;
    width: 50%;
}
#right{

    height: 300px;
    background-color: #ddd;
    display: table-cell;
    width: 50%;
}

Answer 2

在现代浏览器中（IE9 +，firefox，chrome）在Html：

<body>
  <div id="left">leftt</div>
  <div id="center">center</div>
  <div id="right">right</div>
</body>

在css中：

#center{
  width: 960px;
  float: left;
  height: 300px;
  background-color: #bbb;
}
#left{
  float: left;
  height: 300px;
  background-color: #ccc;
  width: 100%;
  width: calc(50% - 480px);
}
#right{
  float: left;
  height: 300px;
  background-color: #ddd;
  width: 100%;
  width: calc(50% - 480px);
}

在IE8中使用JQuery：

<script>
  $(function () {
    var documentWidth = $("body").width();
    $("#left").width((documentWidth - 960) / 2);
    $("#right").width((documentWidth - 960) / 2);
  });
</script>

两侧占用纯CSS / HTML中的所有可用空间

2 个答案:

CSS