摘要:DIV排版
用浮動屬性排版,基本上一定要加上「寬度 width」的設定才會生效。這是因為若沒有設定寬度, DIV區塊會預設會佔有100%的寬度, 這樣接下來的DIV區塊就會「換行」,也就失去了「浮動排版」 的意義。
↓以下範例示意圖
head
選單 內容
footer
<body>
<form id="form1" runat="server">
<div id = "head">head</div>
<div id = "left">left</div>
<div id = "content">content</div>
<div id = "footer">footer</div>
</form>
</body>
<style type ="text/css">
#head {
border:1px solid black;
background-color:Green;
width:auto;
height:30px;
}
#left {
width:100px;
border:1px solid black;
background-color:red;
height:auto;
float:left;
}
#content {
border:1px solid black;
background-color:blue;
width:auto;
height:auto;
margin-left:0px;
}
#footer {
border:1px solid black;
background-color:yellow;
width:auto;
height:20px;
clear:both; 不允許浮動板塊跟自己平行,因此自成一行
}
</style>