DIV+CSS常用網頁布局技巧！ - zuowj－IT工程師數位筆記本

文章出處

以下是我整理的DIV+CSS常用網頁布局技巧，僅供學習與參考！

第一種布局：左邊固定寬度，右邊自適應寬度

HTML Markup

<div id="left">Left sidebar</div>
<div id="content">Main Content</div>

CSS Code

*{
margin: 0;
padding: 0;
}

#left {
float: left;
width: 220px;
background-color: green;
}

#content {
background-color: orange;
margin-left: 220px;/*==等于左邊欄寬度==*/
}
</style>

第二種布局：左邊自適應寬度,右邊固定寬度

HTML Markup

<div id="wrapper" class="clearfix">
<div id="content-wrapper">
<div id="content">
左邊的內容
</div>
</div>
<div id="nav">
右邊的內容
</div>
</div>

CSS Code

body {
padding: 0;
margin: 0;
}

#wrapper {
width: 960px;
border: 1px solid #333;
margin: 0 auto;
}

#nav {
width: 200px;
float: right;
}

#content-wrapper {
margin-right: -200px;
float: left;
width: 100%;
}

#content {
margin-right: 200px;
padding: 0 10px;
}

.clearfix:after {
height: 0;
content: ".";
display: block;
clear: both;
visibility: hidden;
}

第三種布局：三欄布局，左右固定，中間自適應寬度

HTML Markup

div class="left">我是left</div>
<div class="right">我是right</div>
<div class="center">我是center</div>

CSS Code

body,div{ margin:0; padding:0;}
div{ height:200px; color:#F00;}
.left{ float:left; width:100px; background:#00f; _margin-right:-3px;}
.right{ float:right; width:100px; background:#0f0; _margin-left:-3px;}
.center{ background:#333; margin:0 100px; _margin:0 97px;}

IE6中的3px間隙bug

在ie6中，我們看到各列之間有一條3px的間隔，這是只有IE6才有的問題。如果中間那列的margin-left和margin-right都為0的話，則只要把左列的margin-right設為-3px,右列的margin-left設為-3px就行了。但如果把中間列的margin-left和margin-right分別為左右兩列的寬度時，即使把左列的margin-right設為-3px,右列的margin-left設為-3px也還是沒有效果。這時候還得把中間列的margin-left設為左列寬度-3px,margin-right設為右列寬度-3px才行

第四種布局：等高布局，即在實現上述三種布局的同時，還實現左中右區域高度相同（內容不限，以最大高度為準）

實現原理：首先把列的padding-bottom設為一個足夠大的值，再把列的margin-bottom設一個與前面的padding-bottom的正值相抵消的負值，父容器設置超出隱藏，這樣子父容器的高度就還是它里面的列沒有設定padding-bottom時的高度，當它里面的任一列高度增加了，則父容器的高度被撐到它里面最高那列的高度，其他比這列矮的列則會用它們的padding-bottom來補償這部分高度差。因為背景是可以用在padding占用的空間里的，而且邊框也是跟隨padding變化的，所以就成功的完成了一個障眼法。

源文地址：http://www.zuowenjun.cn/post/2014/08/21/17.html

文章列表