固定 - 液體 - 固定布局
[英]Fixed - Liquid - Fixed Layout
問題描述
我想要一個 [Fixed][Liquid][Fixed] 跨瀏覽器兼容的布局。
HTML：
body
div#col-1
div#col-2
div#col-3
CSS：
#col-1 {
width:150px;
float:left;
}
#col-2 {
width:100%;
padding:0 150x;
}
#col-3 {
positon:absolute:
right:0;
width:150px;
}
這會工作/更好的方法嗎？
4 個解決方案
解決方案1
4 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>
瞧！ 你有你的液體布局。
解決方案2
0 2009-10-13 07:51:56
看看這個： http : //siteroller.net/articles/3-column-no-tables-no-floats
但不，我認為那行不通。 所述文章中有很多鏈接可以解決您的問題。
如果有任何興趣，我會擴展那里寫的內容。
解決方案3
0 已采納 2009-10-13 07:55:35
解決方案4
0 2011-03-06 07:21:59
我喜歡羅伯特的回答。 我還會在左側、右側、中心和頁腳周圍添加一個包裝器。 在這里，我將 id 設置為“頁面”：
<body>
<div id="page">
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
<div id="footer">footer</div>
</div>
</body>
然后，您還可以為“頁面”添加樣式：
#page {
min-width: 600px;
}
這樣，如果用戶將瀏覽器縮小到非常小的尺寸，內容仍然看起來不錯。
Div列布局有3列：固定 - 液體 - 固定
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.