DIV+CSS經常使用網頁佈局技巧！

時間 2019-11-17

標籤 div+css div css 經常使用網頁佈局技巧欄目 HTML 简体版

原文原文鏈接

如下是我整理的DIV+CSS經常使用網頁佈局技巧，僅供學習與參考！css

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

HTML Markupapp

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

CSS Codeide

*{
margin: 0;
padding: 0;
}post

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

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

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

HTML Markupit

<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