固定-液体-固定布局
固定-液体-固定布局
提问于 2009-10-13 07:50:30
我希望有一个FixedFixed跨浏览器兼容的布局。
HTML：
body
div#col-1
div#col-2
div#col-3CSS：
#col-1 {
width:150px;
float:left;
}
#col-2 {
width:100%;
padding:0 150x;
}
#col-3 {
positon:absolute:
right:0;
width:150px;
}这是否有效/更好的方法呢？
回答 4
Stack Overflow用户
回答已采纳
发布于 2009-10-13 07:55:36
好的，知道了：http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/
Stack Overflow用户
发布于 2009-10-13 10:39:19
这很简单。
以下是代码
<html>
<head>
<style type="text/css">
#left {
float: left;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#right {
float: right;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#center {
/* margin with 10px margin between the blocks*/
margin: 0 160px;
border: 1px solid black;
height: 50px;
}
</style>
</head>
<body>
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
</body>
</html>我使用浮点数而不是绝对位置。在绝对定位之上使用浮动的好处是，你可以在它下面放一个div，比如说页脚。只需给它一个明确的说明:两者都有，它会自动显示在页面底部。
下面是一个带有页脚的示例
<html>
<head>
<style type="text/css">
#left {
float: left;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#right {
float: right;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#center {
/* margin with 10px margin between the blocks*/
margin: 0 160px;
border: 1px solid black;
height: 50px;
}
#footer {
clear: both;
margin-top: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
<div id="footer">footer</div>
</body>
</html>瞧！你已经有了你的液体布局。
Stack Overflow用户
发布于 2009-10-13 07:51:57
看看这个：http://siteroller.net/articles/3-column-no-tables-no-floats
但是不，我不认为那是可行的。不过，在这篇文章中有很多链接可以解决你的问题。
如果有任何兴趣，我会延长那里所写的内容。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1558761
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号