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

【问题标题】：left div + right div + center div = 100% width. How to realise?左 div + 右 div + 中心 div = 100% 宽度。如何实现？
【发布时间】：2010-07-05 07:27:57
【问题描述】：

我有三个 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>

如何使 center div 最大宽度，以便 containerDivWidth = leftDivWidth+ rightDivwidth + centerDivWidth;

【问题讨论】：

标签： css xhtml layout html

【解决方案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>

【讨论】：

不错应用简单快速

【解决方案2】：

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

关于这个布局有一篇很棒的 List Apart 文章，你应该看看：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

这似乎步入正轨，但我看不到让正确位“浮动”回到内联的方法，因为中间位的宽度太宽。
如果您从中心 div 中移除浮动，并将其设置为 display:inline 它应该位于两个外部 div 之间。

【解决方案4】：

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

【讨论】：

【解决方案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>

如果我错了，我会很高兴。

【讨论】：

真正的左右 div 不是固定的（我已经设置了它们的宽度，例如）。它们包含一些自动设置宽度的内容。但是中心 div 应该获得左右之间所有可用表面的问题。