兼容性，float

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             .box{
 8                 width: 400px;
 9                 border: 1px solid black;
10                 overflow:hidden;    <主盒子要消除浮动给否则包不住里面的内荣>
11             }
12             .let{
13                 float: left;
14                 background-color: red;
15             }
16             .right{
17                 float: right;
18                 background-color: blue;
19             }
20             h2{
21                 float: left;      <要使得h2不盛满一行就得给h2加一个浮动>
22                 margin: 0;
23                 height: 30px;
24             }
25         </style>
26         <!--
27             解决方案：float: left;
28         -->
29     </head>
30     <body>
31         <div class="box">
32             <div class="let">
33                 <h2>左边</h2>
34                 
35             </div>
36             <div class="right">
37                 <h2>右边</h2>
38             </div>
39 
40         </div>
41     </body>
42 </html>
posted on 2016-03-02 15:33 hduhdc 阅读(293) 评论(0) 收藏举报