左侧div + 右侧div + 中心div = 100%宽度。如何实现？

Question

我有三个 div 和一个主 div：

<div id="container" style="width:100%;">
    <div id="left" style="width:201px; float:left;">
     .... 
    </div>
    <div id="centre" style="float:left;">
     ....   
    </div>
    <div id="right" style="width:135px; float:right;">
     ....
    </div>
</div>

如何使中间的div最大宽度，以便containerDivWidth = leftDivWidth + rightDivwidth + centreDivWidth;

- andrii

Answer 1

这将允许您拥有固定的左右列和灵活的中心部分：

CSS

<style type="text/css">
  #left {
    float: left;
    width: 201px;
    border: 1px solid red;
  }

  #centre {
    display: block;
    overflow: auto;
    border: 1px solid green;
  }

  #right {
    float: right;
    width: 135px;
    border: 1px solid blue;
  }
</style>

HTML

<div id="container" style="width:100%;"> 
  <div id="left">Left</div>
  <div id="right">Right</div>
  <div id="centre">Middle</div>
</div> 

- Gert Grenander

---

简单易用且快速应用。 - Dinesh Dabhi

Answer 2

我相信你想要实现的是“圣杯布局”。

这个布局有一篇很好的文章，你应该看看：

http://www.alistapart.com/articles/holygrail

- Cesar Canassa

Answer 3

我之前所做的是将centre设置为左边距201像素，右边距135像素。将其设置为相对定位（而不是浮动），然后它应该填满左列和右列之间的所有剩余空间。

我似乎找不到我的旧代码示例之一，所以这是我目前能做到的最好的。希望能有所帮助！

- Jty.tan

---

这似乎很顺利，但我看不到任何方法让正确的位返回以对齐，因为中间部分的宽度太宽了。 - Matt Mitchell

如果您从中心div中删除float，并将其设置为display:inline，则应将其插入两个外部div之间。 - DHuntrods

Answer 4

这可能有所帮助： http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm
_{(来源：matthewjamestaylor.com)}

- Dominic

Answer 5

在我的观点中，CSS 的一个缺点是无法同时混合使用相对宽度和固定宽度。

最好的做法是类似这样：

<div id="container" style="width:100%;"> 
    <div id="left" style="width:20%; float:left;"> 
     ....  
    </div> 
    <div id="centre" style="width:65%; float:left;"> 
     ....    
    </div> 
    <div id="right" style="width:15%; float:right;"> 
     .... 
    </div> 
</div> 

如果我错了，我会非常高兴。

- Matt Mitchell

---

实际上，左右两个div并不是固定的（我只是为了举例设置了它们的宽度）。它们包含一些自动设置宽度的内容。但问题在于中间的div应该获取左右两侧之间所有可用的表面。 - andrii