使用inline-box代替float

最新推荐文章于 2018-09-25 16:05:16 发布

weixin_30273763

最新推荐文章于 2018-09-25 16:05:16 发布

阅读量61

点赞数

原文链接：http://www.cnblogs.com/rainlam163/p/inline-box.html

版权

在网页布局中，使用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这些旧浏览器而写的。

转载于:https://www.cnblogs.com/rainlam163/p/inline-box.html

weixin_30273763

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用inline-box代替float

在网页布局中，使用float有不少好处，可以为你带来更加自由的布局，还可以自动根据浏览器改变布局效果。但是使用多了你也可能发现有一个问题，使用了float之后，外层的div不会撑高，导致布局出现坍塌。这里有一个解决方案是使用inline-box来布局（当然你也可以清楚浮动）。下面给出一个demo：<html xmlns="http://www.w3.org/1999/x...
复制链接

扫一扫