跨浏览器的inline-block[译]
作者：糖伴西红柿 来源：前端观察 发布时间：2009-03-11 21:04:00
标签：布局,css,浏览器,inline-block
啊，inline-block，挺难琢磨并且迷人的声明上承诺了很多，其实提供了很少。很多次我拿到类似这样的 PSD 文件：
就哭了。
一般说来，这种类型的布局是小菜一桩。固定宽度，固定高度，向左浮动就解决了。但是，这个设计中内容的多少是可变的，这就意味着如果这些块中的一些内容比其他的多，就会破坏这个布局。
因为第一个展示项比其他项高，第五个项目就相对第一个浮动，而不是位于它下面了。基本上我们想要一个弹性表格的布局，但是适当的，语义标记。
我们以一个无序列表开始这个简单的页面，并把 display 设置为 inline-block:
<ul>
<li>
<h4>This is awesome</h4>
<img src="/file/UploadPic/20093/11/3279671785_d1f2e665b6_s-29.jpg"
alt="lobster" width="75" height="75"/>
</li>
...
<ul>
<style>
li {
width: 200px;
min-height: 250px;
border: 1px solid #000;
display: inline-block;
margin: 5px;
}
</style>
效果在 Firefox 3， Safari 3 和 opera 中看起来没问题：
0
投稿猜你喜欢
- 这也是老早前整理的了，也贴出来吧：1． showModalDialog和showModelessDialog的异同
- 最近论坛里总有人问幻灯片怎么从数据库里取数据，花了几分钟简单的写了下。用到的人可以自己在细化<％dim rs,sqlset&
- 今天一个项目上需要，修改了一些属性，测试成功。<!--#include file="conn.asp"-
- 很简单的方法，但很实用。用过新浪邮箱的朋友应该会知道此脚本的效果。如果您提交的数据处理时间很长，用这个做为提示很不错的.将下面的代码复制到&
原文地址：http://ilovetypography.com/2007/10/22/so-you-want-to-create-a-fon- （下面的代码原来我想用折叠的代码的，但是在google里面老是添加不了折叠的代码，所以就整屏的贴出来了，望大家不要见外。） 朋友的比较好的存
- 篇首语：原来改mdb为asp就能防下载是鬼话。 引子：昨天和animator试验了一下，把data.mdb文件改名为data.as
- sysdate+(5/24/60/60) 在系统时间基础上延迟5秒 sysdate+5/24/60 在系统时间基础上延迟5分钟 sysdat
- 分页程序sub show_page参数说明：total_records 总记录数everypage_records 每页显示条数
- 1.建立设计规范的意义 建立设计文档的根本目的
- 任何一位数据库程序员都会有这样的体会：高通信量的数据库驱动程序中，一条糟糕的SQL查询语句可对整个应用程序的运行产生严重的影响，其不仅消耗掉
- 有时一些网页对源码进行了加密，我们很难找到类似像“onselectstart="return false"”这样的代码，
- 对于一个内容页的文章来说，如果这个文章内容过长或是其中有分类（排行），那么进行分页阅读无疑是最好的选择。如果一个文章内容不涉及分类，比如小说
- 1:使用SHOW语句找出在服务器上当前存在什么数据库：mysql> SHOW DATABASES;2:2、创建一个数据库MYSQLDA
- 无论使用int还是varchar，对于Status的多选查询都是不易应对的。举例，常规思维下对CustomerStatus的Enum设置如下
- 一、图像缩略图的编辑图像的缩略图是指把图像按原比例缩小,可作为原图的预览，这在网络速度比较慢时可快速地显示图片的概图。当你的网页上有大型图片
- 大部分数据库管理员拥有某种形式的数据库元数据库，他们依赖其来跟踪范围很广的Microsoft SQL Server环境。我利用连接的服务器和
- 开发过程中，错误免不了。为了纠正错误与规范化。可以使用MS SQL Server的系统存储过程sp_rename与OBJECTPROPERT
- explain显示了mysql如何使用索引来处理select语句以及连接表.可以帮助选择更好的索引和写出更优化的查询语句.使用方法:在sel
- SQL Server 客户端配置工具用于配置客户端的工具(除基于DOS操作系统的客户端工具以外)，以便使它们可以成功地和SQL Server
