跨浏览器的inline-block[译]
作者:糖伴西红柿 来源:前端观察 时间:2009-03-11 21:04:00
啊,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 中看起来没问题:
标签:布局,css,浏览器,inline-block
0
投稿
猜你喜欢
互联网产品设计师自我介绍
2009-04-16 12:45:00
2009年五一劳动节logo欣赏
2009-05-02 18:26:00
MySQL优化之数据表的处理
2008-12-22 14:45:00
一个ACCESS数据库数据传递的方法
2008-03-05 11:58:00
document.createElement()用法及注意事项
2008-04-21 15:16:00
JS获取对象代码总结
2011-03-07 16:14:00
javascript 获取中文字符串长度
2009-10-18 12:06:00
prototype.js1.4版开发者手册
2007-09-30 14:09:00
mysql: 安装后的目录结构
2011-03-08 09:46:00
跨浏览器的本地存储(一):userData behavior
2008-08-05 18:13:00
ASP代码中的容错机制
2008-10-19 17:30:00
asp如何准确地获得一个整数?
2010-07-07 12:25:00
Microsoft SQL Server数据库SA权限总结
2009-01-06 11:32:00
品牌的统一体验
2010-05-19 13:08:00
社会化音乐:在夹缝中生出花来
2009-08-24 12:37:00
asp_数据库操作封装
2010-04-03 21:00:00
设计之外随谈
2009-06-16 14:38:00
如何用变量实现群聊和悄悄话?
2010-05-19 21:33:00
计划备份mysql数据库
2009-03-09 14:34:00
MySQL权限详解
2011-02-16 12:20:00