流体宽度网站设计

Question

我希望我的网站有3个部分：左中和右。 我希望我的左侧部分为150px，我的右侧部分为250px，中间部分占据剩余空间。我似乎无法使用css实现它。这是我应该工作的代码：

<div>
    <div class="left" style="float: left; width: 150px; background: red">
    </div>
    <div class="center" style="background: blue;">
    </div>
    <div class="right" style="background: green; width: 250px; float: right">
    </div>
</div>

我得到的是正确的部分被推下来，因为中间部分占据了所有空间。

我做错了什么？

Answer 1

试试这个

<div>
    <div class="left" style="float: left; position: relative; width: 150px; background: red">
    </div>
    <div class="center" style="float: left; position: relative; background: blue;">
    </div>
    <div class="right" style="float: left; position: relative; background: green; width: 250px;">
    </div>
</div>

更好的是，你应该开始使用像twitter一样的css bootstrap：http://twitter.github.com/bootstrap/

它处理列管理，这很容易

Answer 2

<div>
    <div class="left" style="float: left; width: 150px; background: red">
    </div>
    <div class="left center" style="background: blue; float: left; width: 500px">
    </div>
    <div class="right" style="background: green; width: 250px; float: right">
    </div>
</div>

中心也必须有一个浮动。除非使用绝对定位，否则不能没有浮动。请参阅上面的更新代码理想情况下，流畅的设计就像是：

<div style="width:100%>
    <div class="left" style="float: left; width: 20%; background: red">
    </div>
    <div class="left center" style="background: blue; float: left; width: 55%">
    </div>
    <div class="right" style="background: green; width: 25%; float: right">
    </div>
</div>

Answer 3

<div style="overflow:hidden"> 
    <div class="left" style="float: left; width: 150px; background: red"> 
    </div> 
    <div class="right" style="background: green; width: 250px; float: right"> 
    </div> 
    <div class="center" style="background: blue; margin-left:150px; margin-right:250px"> 
    </div> 
</div> 

希望有所帮助。

Answer 4

这正是您所寻找的。您只需将值调整为您希望的尺寸。

HTML

<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>

CSS

body {
  min-width: 630px;      
}
#container {
  padding-left: 200px;   
  padding-right: 190px;  
}
#container .column {
  position: relative;
  float: left;
}
#center {
  padding: 10px 20px;    
  width: 100%;
}
#left {
  width: 180px;          
  padding: 0 10px;       
  right: 240px;          
  margin-left: -100%;
}
#right {
  width: 130px;          
  padding: 0 10px;       
  margin-right: -190px;  
}


* html #left {
  left: 150px;           
}