什麼是使用「display：inline-block」的最佳實踐

Question

當我將它們與列表項一起使用時，「inline-block」和「position」使我感到困惑。 Dreamweaver CS3沒有幫助，因爲它沒有顯示內嵌塊，而是作爲一堆元素。我有興趣瞭解最佳實踐以獲取不同高度的塊元素沿着其頂部邊緣對齊，同時也集中在總可用空間內。

請您看看這個簡化代碼，看看我是否正確地做了它？ http://www.words4it.com/test_block1.html

這裏的CSS： http://words4it.com/test_block1.css

謝謝

Answer 1

here is the good article約定位元素

here is the good article約元素大小，邊距和補

畢竟，我簡短的建議關於塊，直列塊和浮動： 瀏覽器具有使元素的兩個一般車型：

1. 聯模式，塊粘彼此水平使得與塊之間的換行符塊的水平線，您可以考慮一下它就像文字中的文字。採用這種模式進行以下操作，屬性：

   • 字體大小
   • 的line-height
   • 的text-align
   • 垂直對齊
   • 等

2. 塊模型，塊互相垂直垂直堆積塊，你可以想像它像pa文中的段落。使用這個模型進行以下操作，屬性：

   • 餘量
   • 填充
   • 浮動/清除
   • 位置
   • 等

相應的模型應當使用當你試圖達到所描述的行爲。 幾乎沒有例外：具有相同浮點值的幾個塊（例如float：left）可以表現得與幾個行內塊非常相似，不同之處在於瀏覽器兼容性，並且這種選擇應該取決於情況。