DIV排版

摘要: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>