zoukankan      html  css  js  c++  java
  • display:inlineblock的妙用!!列表布局!!

    如下图:像这种列表布局我们一般用 float:left; 设置宽度和高度就OK了。

    但是,如果高度不同或者文字字数不同呢,再用float:left;布局就全乱了。如下图:

    现在,我们可以利用display:inline-block;完美的解决这个问题。如下图:

    代码如下:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style type="text/css">
    * { margin:0; padding:0; }
    ul { list-style:none; font-size:0; }
    li { display:inline-block; *display:inline; zoom:1; 200px; font-size:14px; vertical-align:top; }
    </style>
    </head>
    
    <body>
    
    
    
    <ul>
    	<li>
    		<img src="http://static.cnblogs.com/images/logo_small.gif" alt="">
    		<p>代码改变世界</p>
    	</li>
    	<li>
    		<img src="http://static.cnblogs.com/images/logo_small.gif" alt="">
    		<p>代码改变世界</p>
    		<p>代码改变世界</p>
    	</li>
    	<li>
    		<img src="http://static.cnblogs.com/images/logo_small.gif" alt="">
    		<p>代码改变世界</p>
    	</li>
    	<li>
    		<img src="http://static.cnblogs.com/images/logo_small.gif" alt="">
    		<p>代码改变世界</p>
    	</li>
    	<li>
    		<img src="http://static.cnblogs.com/images/logo_small.gif" alt="">
    		<p>代码改变世界</p>
    	</li>
    	<li>
    		<img src="http://static.cnblogs.com/images/logo_small.gif" alt="">
    		<p>代码改变世界</p>
    		<p>代码改变世界</p>
    	</li>
    	<li>
    		<img src="http://static.cnblogs.com/images/logo_small.gif" alt="">
    		<p>代码改变世界</p>
    	</li>
    	<li>
    		<img src="http://static.cnblogs.com/images/logo_small.gif" alt="">
    		<p>代码改变世界</p>
    	</li>
    	<li>
    		<img src="http://static.cnblogs.com/images/logo_small.gif" alt="">
    		<p>代码改变世界</p>
    	</li>
    	<li>
    		<img src="http://static.cnblogs.com/images/logo_small.gif" alt="">
    		<p>代码改变世界</p>
    		<p>代码改变世界</p>
    	</li>
    	<li>
    		<img src="http://static.cnblogs.com/images/logo_small.gif" alt="">
    		<p>代码改变世界</p>
    		<p>代码改变世界</p>
    		<p>代码改变世界</p>
    		<p>代码改变世界</p>
    	</li>
    	<li>
    		<img src="http://static.cnblogs.com/images/logo_small.gif" alt="">
    		<p>代码改变世界</p>
    	</li>
    	<li>
    		<img src="http://static.cnblogs.com/images/logo_small.gif" alt="">
    		<p>代码改变世界</p>
    	</li>
    	<li>
    		<img src="http://static.cnblogs.com/images/logo_small.gif" alt="">
    		<p>代码改变世界</p>
    	</li>
    	<li>
    		<img src="http://static.cnblogs.com/images/logo_small.gif" alt="">
    		<p>代码改变世界</p>
    	</li>
    	<li>
    		<img src="http://static.cnblogs.com/images/logo_small.gif" alt="">
    		<p>代码改变世界</p>
    	</li>
    </ul>
    
    
    
    </body>
    </html>
     

     使用inline-block更大的优势在于: 让元素实现block特性又不失inline 基础,可以像普通行内元素一样操作这个块,可以实现很多float无法实现的效果。

    解释一下代码:

    1、ul { list-style:none; font-size:0; }  

    font-size:0; 是为了去掉 <li>之间由于换行而产生的3px的间距。当然了,解决这个问题方法不只一个,比如:也可以用margin-right:-3px;解决。

    2、由于ie6、7不支持display:inline-block,
      所以我们用*display:inline; zoom:1;解决这个问题。

    知识扩展:http://www.zhangxinxu.com/wordpress/?p=2357

    http://ued.alipay.com/wd/2008/10/29/%E5%9F%BA%E4%BA%8Edisplaytable%E7%9A%84css%E5%B8%83%E5%B1%80/

  • 相关阅读:
    Jenkins的插件管理(安装和更新插件)
    [Flutter] MacOS/Windows Flutter 环境走一遍
    [Sw] 使用 Swoole Server task/协程 处理大数据量异步任务时注意
    [Sw] Swoole-4.2.9 可以尝试愉快应用 Swoole 协程
    [PHP] 常备的现代 PHP 项目开发准备
    [SF] Symfony 标准 HttpFoundationRequest 实现分析
    [Linux] umask 从三类人群的权限中拿走权限数字
    [Design] 后端程序的高并发与异步
    [Linux]系统管理: 进程管理(ps/top/pstree/kill/pkill), 工作管理, 系统资源查看, 系统定时任务
    [FE] 有效开展一个前端项目-V2 (vuejs-templates/webpack)
  • 原文地址:https://www.cnblogs.com/huanlei/p/2577449.html
Copyright © 2011-2022 走看看