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

使用inline-box代替float的更多相关文章

  1. 关于line box，inline box，line-height，vertical-align之间的关系

    1.content area 围绕着文字的一种box,高度由font-size和font-family决定.在chrome控制器里,你用鼠标志向某个内敛元素,显示的高度值. 2.inline box的 ...

  2. 关于block和inline元素的float

    CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 l ...

  3. inline-block,inline,block,table-cell,float

    float:left ---------------------------------------------------------------------------------------- ...

  4. 关于display的属性：block和inline-block以及inline的区别，float相关说明

    首先是block和inline的区别,说通俗点block就是让其形成块级元素,而且其前后都会有换行符:而inline的话就是让元素设置为内联样式(对其设置的宽高都没有什么卵用,不产生效果,但是颜色效果 ...

  5. 在网页布局中合理使用inline formating context（IFC）

    引子:给大家出一个小小的考题,如何使用css来实现类似下面的在指定区域内,内容自适应的垂直居中.

  6. css position, display, float 内联元素、块级元素

    position属性:position属性指出一个元素的定位方法.有4种可能值:static, relative, absolute or fixed: static:默认值,元素按照在文档流中出现的 ...

  7. css 内联元素inline 行框全解

    首先看一篇文章: CSS框模型:一切皆为框 — 从行框说起 一 行框 看图说话 上图代表了框模型中的行框.line-height 属性设置行间的距离(行高).该属性会影响行框的布局.在应用到一个块级元 ...

  8. 对float的理解

    从IE6下的双边距引出 对一个div设置float:left;同时设置了margin-left:100px时在IE6下会出现双边距. 有两种解决办法: 1,推荐办法.加display:inline 2 ...

  9. float 浮动

    浮动最开始的目的是为了让文字环绕图片(一个图片和多行文字对齐)   1.包裹性:元素添加 float 属性之后 自动变成 inline-block 元素,能设置 宽高 2.破坏性:破坏自身高度,还会使 ...

  10. float 与 display：inline-block

    float: 1.会导致高度塌陷 <style type="text/css"> li{ float:left; height:200px; width:200px; ...

随机推荐

  1. vs2010 坑爹的BUG

    以前用VS2005的时候,就遇到过一些很奇怪的BUG,比如始终报错,然后把项目文件删除,重新创建一个项目文件,就好了. 今天用VS2010测试程序时,又发现一个坑爹的BUG,这绝对不是我的错! sta ...

  2. Coco dfs 或者 状压dp。...

    C -- Coco Time Limit:1s Memory Limit:64MByte Submissions:148Solved:85 DESCRIPTION Coco just learned ...

  3. P2345 奶牛集会andP2657 低头一族

    做法是一样的 题目背景 MooFest, Open 题目描述 约翰的N 头奶牛每年都会参加“哞哞大会”.哞哞大会是奶牛界的盛事.集会上的活动很 多,比如堆干草,跨栅栏,摸牛仔的屁股等等.它们参加活动时 ...

  4. C#局部类型partial在定义实体类Model中的应用

    以前一直用继承类的方法,原来还可以这样 //例如:定义一个Person的实体类,用户ID(PersonId),姓名(Name),性别(Sex),年龄(Age),地址(Address),联系方式(Tel ...

  5. leetcode410 Split Array Largest Sum

    思路: dp. 实现: class Solution { public: int splitArray(vector<int>& nums, int m) { int n = nu ...

  6. Sublime折腾记录

    本文可以理解为FAQ,主要是为了大家GET一些技能,具体内容包括LICENSE.重置.Package Control的安装,其他内容以后可能补充... 最后说明一下自己的版本:Build 3114 L ...

  7. 【HEVC简介】CTU、CU、PU、TU结构

     参考文献:见<High Efficiency Video Coding (HEVC)>Block Structures and Parallelism Features in HEVC章 ...

  8. MFC技术积累——基于MFC对话框类的那些事儿5

    4. 菜单 4.1 弹出菜单 本节主要讲解如何在主对话框的指定区域内通过鼠标右击来弹出一个菜单选项.最终效果图如图4.1. 如图4.1鼠标只能在指定区域(图中深色区域)内右击时弹出菜单,在指定区域外点 ...

  9. （转）Spring的三种实例化Bean的方式

    http://blog.csdn.net/yerenyuan_pku/article/details/52832793 Spring提供了三种实例化Bean的方式. 使用类构造器实例化. <be ...

  10. HashSet LinkedHashSet TreeSet 分析

    1.HashSet分析 hashset 底层是hash表,就是hashMap,是无序的,唯一的.也就是说,它的底层其实就是一个HashMap  key 值的组成值.所以具有唯一性. public Ha ...