跨浏览器的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
投稿猜你喜欢
英文原文：http://www.usabilitypost.com/2009/04/15/8-characteristics-of-succ- 1.基本信息Pandas 的 apply() 方法是用来调用一个函数(Python method)，让此函数对数据对象进行批量处理。Pand
- 问题描述我自己根据edgelist计算的邻接矩阵，与调用networkx.adjacency_matrix(g)返回的结果不一样，经过调试发
- 在进行matplotlib画图的时候，经常会出现这个的报错，虽然知道是因为没有对应的字体的原因，但是，将字体下载后放到目标路径下，仍然没有办
- 本文实例讲述了Python基于csv模块实现读取与写入csv数据的方法。分享给大家供大家参考，具体如下：通过csv模块可以轻松读取格式为cs
- 1. css背景图1.1 背景属性<!DOCTYPE html><html lang="en">
- 问题描述Python调整图片文件的占用空间大小，而不是分辨率1.jpg图片大小为 8KB 减小文件大小使用 PIL 模块pip i
- 在我们想要对不同变量进行判断的时候，会分析其中的之间的联系。这种理念同样也被用在实例生活中，最常见到的是做一个地理的热力图。很多人对画热力图
- 最近发现一个叫 Bootstrap 的好东西，Bootstrap 是现在最流行的响应式 CSS 框架，它以移动设备优先，能够快速适应不同设备
- 序言小学妹说要毕业了，学了一学期Python等于没学，现在要做毕设做不出来，让我帮帮她，晚上去她家吃夜宵。当时我心想，这不是分分钟的事情，还
- 有的bug，莫名其妙就好了…python3.9 报错 “AttributeError: 'HTMLParser' objec
- 我们在建立一个大型网站的时候会有很多副页面框架模式，甚至一些细节元素都是相同的。但令人困扰的是更新它们却要费些周折，要一遍遍地反复更新每个页
- PhotoSwipe插件能实现手机端点击图片全屏放大 再双击图片放大等功能PhotoSwipe插件官方网站 http://www.photo
- 通过官方文档https://docs.djangoproject.com/zh-hans/3.1/topics/db/multi-db/和c
- 为什么会用多页面在开发时，对于同一类型的多网站，多页面大大节省开发时间，只需要配置一次就可以实现多次开发变成单次开发，同时一个包就可以展示一
- PHP中的字符串操作功能是比较多的,重要的有以下这些: (1)echo,print,printf,spr
- 一、同步原理基于Mysql的binlog日志订阅：binlog日志是Mysql用来记录数据实时的变化Mysql数据同步到ES中分为两种，分别
- 前言CRUD代表: 增加(create) ,查询(retrieve) ,更新(update) ,删除(delete) 单词首字母。一、新增数
- 一、背景今天有个小需求，要确认客户端有没有往服务端发送udp包，但为了减轻工作量，不想每次到机器上手动执行tcpdump抓包命令。于是就写了
- 也许你听说过Hibernate的大名，但可能一直不了解它，也许你一直渴望使用它进行开发，那么本文正是你所需要的！在本文中，我向大家重点介绍H
