使用inline-box代替float

在网页布局中，使用float有不少好处，可以为你带来更加自由的布局，还可以自动根据浏览器改变布局效果。但是使用多了你也可能发现有一个问题，使用了float之后，外层的div不会撑高，导致布局出现坍塌。这里有一个解决方案是使用inline-box来布局（当然你也可以清楚浮动）。

下面给出一个demo：

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <title>使用inline-box代替float</title>
     <style>
         .main { border: 1px solid black; width: 360px; height: 180px; }
         .main img { height: 160px; margin: 10px; }
         .main ul { display: inline-block;*display:inline;zoom:1;vertical-align:15px;}
     </style>
 </head>
 <body>
     <div class="main">
         <img src="http://202.192.128.41/xyw/UserFiles/2013-6/13/201361316733169.jpg" alt="叶小钗" />
         <ul>
             <li>湛江师范学院</li>
             <li>湛江师范学院</li>
             <li>湛江师范学院</li>
             <li>湛江师范学院</li>
             <li>湛江师范学院</li>
             <li>湛江师范学院</li>
             <li>湛江师范学院</li>
             <li>湛江师范学院</li>
         </ul>
     </div>
 </body>
 </html>

就这样，你也可以实现左右布局而不必使用float。*display:inline;zoom:1;这两句是为了兼容IE6这些旧浏览器而写的。

posted @ 2013-06-30 22:12  小五毛  阅读(386)  评论(0)  编辑  收藏  举报