css - 使用 "display: inline-block"的最佳做法是什么

Question

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

请您看一下这个简化的代码，看看我是否正确地完成了它？ 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关于元素大小、边距和填充

毕竟，关于 block 、内联 block 和 float 的我的简短建议:浏览器有两种对齐元素的通用模型:

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

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

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

   • margin
   • 填充
   • float /清除
   • 职位
   • 等等

当您尝试实现所描述的行为时，应使用相应的模型。几乎没有异常(exception):几个具有相同浮点值的 block (例如 float:left)可以表现得与几个内联 block 非常相似，不同之处在于浏览器兼容性，您的选择应视情况而定。