Chinaunix首页 | 论坛 | 博客
  • 博客访问: 244893
  • 博文数量: 62
  • 博客积分: 1350
  • 博客等级: 中尉
  • 技术积分: 457
  • 用 户 组: 普通用户
  • 注册时间: 2006-09-13 09:56
文章分类

全部博文(62)

文章存档

2016年(1)

2013年(9)

2012年(18)

2011年(31)

2010年(1)

2006年(2)

分类: 系统运维

2011-04-26 16:12:37

啊,inline-block,挺难琢磨并且迷人的声明上承诺了很多,其实提供了很少。很多次我拿到类似这样的 PSD 文件:

就哭了。

一般说来,这种类型的布局是小菜一桩。固定宽度,固定高度,向左浮动就解决了。但是,这个设计中内容的多少是可变的,这就意味着如果这些块中的一些内容比其他的多,就会破坏这个布局。

因为第一个展示项比其他项高,第五个项目就相对第一个浮动,而不是位于它下面了。基本上我们想要一个弹性表格的布局,但是适当的,语义标记。

我们以一个无序列表开始这个简单的页面,并把 display 设置为 inline-block:

<ul> <li> <h4>This is awesome</h4> <img src="" alt="lobster" width="75" height="75" /></li> ...</ul>
阅读(693) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~