码迷,mamicode.com
首页 > 其他好文 > 详细

浮动布局

时间:2016-04-18 00:57:22      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:

<html>
 <head>
  <title>Float浮动布局
  </title>
  <style>
  div{
     width:100px;
     height:100px;
    
  }
  #headeer{
     width:40px;
     height:40px;
     background:red;
     float:left
  }
  #main{
     width:40px;
     height:40px;
     background:yellow;
     float:right;
  }
  #footer{
     width:40px;
     height:40px;
     background:green;
     float:left;
     margin-top:20px;
  }
  #comm{
     width:40px;
     height:40px;
     background:black;
      margin-top:20px;
     float:right;
  }
  </style>
 </head>
 <body>
   <div>
        <div id="headeer">我是左上</div>
        <div id="main">我是右上</div>
        <div id="footer">我是左下</div>
        <div id="comm">我是右下</div>
    </div>
 </body>
</html>



 

浮动布局

标签:

原文地址:http://www.cnblogs.com/bingg/p/5402745.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!