css - 使用“display: inline-block”的最佳实践是什么

Question

当我将它们与列表项一起使用时，“内联块”和“位置”让我感到困惑。Dreamweaver CS3 没有帮助，因为它不显示块内联，而是显示为一堆元素。我有兴趣学习使不同高度的块元素沿其顶部边缘对齐的最佳实践，同时在总可用空间内居中。

请你看一下这个精简的代码，看看我是否做得正确？ http://www.words4it.com/test_block1.html

这是 CSS： http ://words4it.com/test_block1.css

谢谢

Answer 1

这是关于定位元素的好文章

这是关于元素大小、边距和填充的好文章

毕竟，我对块、内联块和浮动的简短建议：浏览器有两种对齐元素的通用模型：

1. 内联模型，块水平地相互粘连，形成块的水平线，块之间有换行符，你可以把它想象成文本中的单词。使用此模型，您可以操作以下属性：

   • 字体大小
   • 线高
   • 文本对齐
   • 垂直对齐
   • 等等

2. 块模型，块相互垂直粘连，形成垂直堆叠的块，你可以把它想象成文本中的段落。使用此模型，您可以操作以下属性：

   • 利润
   • 填充
   • 浮动/清除
   • 位置
   • 等等

当您尝试实现所描述的行为时，应使用相应的模型。几乎没有例外：具有相同浮点值的几个块（例如 float:left）可以表现得与几个内联块非常相似，区别在于浏览器兼容性，您应该根据情况选择。