|
啊，inline-block，挺難琢磨并且迷人的聲明上承諾了很多，其實(shí)提供了很少。很多次我拿到類似這樣的 PSD 文件：
就哭了。
一般說來，這種類型的布局是小菜一樁。固定寬度，固定高度，向左浮動(dòng)就解決了。但是，這個(gè)設(shè)計(jì)中內(nèi)容的多少是可變的，這就意味著如果這些塊中的一些內(nèi)容比其他的多，就會(huì)破壞這個(gè)布局。
因?yàn)榈谝粋�(gè)展示項(xiàng)比其他項(xiàng)高，第五個(gè)項(xiàng)目就相對第一個(gè)浮動(dòng)，而不是位于它下面了�；旧衔覀兿胍粋�(gè)彈性表格的布局，但是適當(dāng)?shù)�，語義標(biāo)記。
我們以一個(gè)無序列表開始這個(gè)簡單的頁面，并把 display 設(shè)置為 inline-block:
<ul>
<li>
<h4>This is awesome</h4>
<img src=" 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 中看起來沒問題：
出處：前端觀察
責(zé)任編輯：bluehearts
上一頁 下一頁 跨瀏覽器的inline-block [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 跨瀏覽器的inline-block [1]
第 2 頁 
