流体宽度网站设计

我希望我的网站有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>

。 enter image description here

我在做什么错？

来源

2012-02-08 Amit Raz

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

希望有所帮助。

来源

2012-02-08 13:59:45

试试这个

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

更好，你应该开始使用一个CSS引导像Twitter之一：http://twitter.github.com/bootstrap/

它处理栏目管理，它真的很容易

来源

2012-02-08 13:54:04

@ Jukien巴尔蒙我已经试过，但该中心的div不把所有的额外空间... – 2012-02-08 13:56:45

那么你应该尝试的百分比的，而不是固定的宽度（宽度：10％，...） – 2012-02-08 13:58:58

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

来源

2012-02-08 13:55:18 TheBlackBenzKid

这正是你所期待的。您只需将值调整为您希望的大小。

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;   
}

来源

2012-02-08 14:08:17

流体宽度网站设计

回答

相关问题