（1）一列固定寬度
#layut {
border: 2px solid #A9C9E2;
background-color: #E8F5FE;
height: 200px;
width: 300px;
}
（2）一列自適應寬度
#layout {
border: 2px solid #A9C9E2;
background-color: #E8F5FE;
height: 200px;
width: 80%;
}
（3）一列固定寬度居中
#layout {
border: 2px solid #A9C9E2;
background-color: #E8F5FE;
height: 200px;
width: 300px;
margin:0px auto;
}
說明：margin屬性用於控制對象的上、右、下、左四個方向的外邊距，當margin使用兩個參數時，第一個參數表示上下邊距，第二個參數表示左右邊距。除了直接使用數值之外，margin還支持一個值叫auto，auto值是讓瀏覽器自動判斷邊距，在這裏，我們給當前div的左右邊距設置爲auto，瀏覽器就會將div的左右邊距設爲相當，並呈現爲居中狀態，從而實現了局中效果。
（4）二列固定寬度
<div id="left">左列</div>
<div id="right">右列</div>
<style type="text/css">
<!--
#left {
background-color: #E8F5FE;
border: 1px solid #A9C9E2;
float: left;
height: 300px;
width: 200px;
}
#right {
background-color: #F2FDDB;
border: 1px solid #A5CF3D;
float: left;
height: 300px;
width: 200px;
}
-->
</style>
說明：float屬性是CSS佈局中非常重要的一個屬性，用於控制對象的浮動佈局方式，我們的大部分div佈局基本上都通過float的控制來實現佈局，float的可選參數爲：none/left/right。
float使用none值時表示對象不浮動，而使用left時，對象將向左浮動，例如本例中的div使用了float:left;之後，右側的內容將流到當前對象的右側。使用right時，對象將向右浮動，如果將#left的float值設置爲right，將使得#left對象浮動到網頁右側，而#right對象則由於float:left;屬性浮動到網頁左側。
（5）二列寬度自適應
#left {
background-color: #E8F5FE;
border: 1px solid #A9C9E2;
float: left;
height: 300px;
width: 20%;
}
#right {
background-color: #F2FDDB;
border: 1px solid #A5CF3D;
float: left;
height: 300px;
width: 70%;
}
說明：在CSS佈局中，一個對象的寬度，不僅僅由width值來決定，一個對象的真實寬度是由對象本身的寬、對象的左右邊距，以及左右邊框，還有內邊距這些屬性相加而成，因此左面的對象不僅僅是瀏覽器窗口的20%的寬度，還應該加上左邊的邊框的寬度。這樣算下來左右欄都超出了自身的百分比寬度，最終的寬度也超過了瀏覽器窗口的寬度，因此右欄將被擠掉第二行顯示，從而失去了左右分欄的效果，因此這裏使用了並非100%的寬度之和，而在實際應用之中，可以通過避免邊框及邊距的使用，而達到左右與瀏覽器填滿的效果。