Question

这就是问题所在。

我有一个负责宽度和高度的div。在里面我有另外两个宽度固定的，一个在左边，另一个在右边。

我需要另外两个留在这两个中间，宽度总是填充左边一个和右边一个之间的距离。

是图片，顶部的div是我现在拥有它们的方式，最底层的是目标。

enter image description here

可以看到中心div已经具有响应高度，我找不到任何适合宽度的东西。

这些是CSS

父div

#full-size{
  height:100%;
  width:100%;
  overflow:hidden;
  border: 1px solid #000;
  top:5px;
  position:relative; 
    padding: 5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    background-color:#FFF;
}

左右divs

#left-content {
  height:100%;
  width:200px;
  border:1px solid #000;
  overflow:auto;
  float:left;
    position:relative; 
    padding: 5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    background-color:#222;
}

#right-content {
  height:100%;
  width:200px;
  border:1px solid #000;
  overflow:auto;
  float:right;
    position:relative; 
    padding: 5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    background-color:#222;
}

我现在所拥有的中心div

#center-content {
  height:100%;
  border:1px solid #000;
  overflow:auto;
  margin-left:5px;
  margin-right:5px;

  display:inline-block;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    background-color:#222;

}

希望有可能实现这一目标。

Answer 1

使用此：

<div id='container'>
    <div id='right'>
        Right Fixed Width Col
    </div>
    <div id='left'>
        Left Fixed Width Col
    </div>
    <div id='middle'>
        Middle Responsive Width Col
    </div>
</div>

和CSS：

#container {
    overflow: hidden;
}
#right {
    float: right;
    width: 180px;
    background-color:red;
}
#left {
    float: left;
    width: 180px;
    background-color:red;
}
#middle {
    margin: 0 180px;
    background-color:blue;
}

的 >>> JSFiddle Sample

Answer 2

有这样的标记：

<div class="parent">
  <div class="left"></div>
  <div class="right"></div>
  <div class="middle"></div>
</div>

您可以使用以下CSS实现它：

.parent {
  ...
  width: 100%;
  padding: 0 200px
  ...
}

.left {
  ...
  float: left;
  width: 200px;
  margin-left: -200px;
  ...
}

.right {
  ...
  float: right;
  width: 200px;
  margin-right: -200px;
  ...
}

.middle {
  ...
  width: 100%;
  ...
}

在两个固定宽度div的中间设置宽度100％到div，全部在另一个100％宽度div内

2 个答案: