CSS+DIV布局初练—DIV元素必须成对出现？

浏览数：23 / 时间：2015年06月09日

很少做和布局相关的工作，往往都是同事将界面设计好，自己填写代码而已，今天心血来潮，决定自己尝试一下这个传说中的CSS，其实做布局首先是要分块，将界面分为自己想要的几个部分，在Winform中，一般都是通过panel+doc属性搞定，如果仔细想想，其实这个panel实际上是起到了划分占位的作用，那么在CSS中布局，划分就应该是用div来完成，本人不才，习惯了Winform的开发，所以第一个布局还是按照Winform的风格来练习的。

在CSS中DIV 属于块级别元素，块元素（例如div）在没有任何布局属性作用时，默认排列方式是换行排列；也就是说，即便它的高度是1px，它也会占居整行。但是在今天使用div的时候，发现一个问题，这个问题让我找了半天，我的效果本应该是下面的：

效果的代码如下，大家不要嘲笑，这个布局在做C/S开发的时候很常见，也很容易，但是在CSS这，我搞了半天。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="_10_1.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        #t1
        {
            float:left;
        
            
            
        }
        
        body
        {
            width : 100%;
            height:100%;
             margin:0,0,0,0
        }
        #top
        {
            width : 100%;
            height:50px;

            background-color:Silver
          
            
        }
          .mapstyle1
        {
            height : 100%;
            width:40px;

            background-color:Purple
        }
     
        
        
        #t2
        {
            height: 60px;
            width :100%;
               
        }
        #main
        {
         width:100%;
         height:300px;
   
          
        }
        
        #main #t2 #t3
        {
            width:56px; 
            height:100%; 
            float:right; 
            background-color:Red;
         
           
        } 
        #main #t2 #map
        {
             height: 60px; 
             width:95%;
             background-color:Orange;
             float:left
        }
        #main .bottom
        {
            height:10px; 
            background-color:  Green
           
           
        }
        
    </style>
    <script type="text/javascript">

        window.onload = function () {
//            var btn1 = document.getElementById("map");
//            btn1.className = "mapstyle1"

//            btn1.onclick = function () {
//                alert("hello");
//            }
        }
    
    </script>
</head>
<body>
<div id="main">

   <div  id ="top"></div>

  <div id="t2" >
        <div  id="t1" class="mapstyle1" >
        </div>       
        <div id="map"></div>
       <div id="t3">

       </div>
   </div>

    <div  id ="bt" class="bottom"></div>



 </div>
</body>
</html>

在开始的时候，我将id为top的div 写成