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;

Answer 1

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

关于此布局有一篇很棒的List Apart文章，你应该检查一下：

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

Answer 2

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

<强> 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>

Answer 3

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

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

Answer 4

这可能会有所帮助： http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm alt text http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels-dimensions.gif

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>

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

Answer 6

用一点点javascript，它的完美/ 首先为选择器添加jquery＆amp;等

<script type="text/javascript" src="js/jquery.js"></script>

和javascript part /

$(document).ready(function(){
    $('#centre').css("width",$(window).width()-336)

    $(window).resize(function() {
        $('#centre').css("width",$(window).width()-336)
    });
});

left div + right div + center div = 100％width。如何实现？

6 个答案: