html - 多个 div 在同一行

Question

我有一个关于滚石乐队的完全粗糙的粉丝网站。上面有一个图片库，我们在其中发布了滚石乐队所有专辑的 LP 封面。每张图片都保存在一个 div 中，以指示读者，如果单击它们，它们将被重定向到完整尺寸的图片

这些 div 会自动占用自己的行，而不是彼此相邻。有人会怎么做？

这是代码

<a href="selftitled.html"><div class="imgWrap">
<img src="images/albums/selftitled.jpg" width="250" 
height="250"><p class="imgDescription">CLICK<br>TO<br>ENLARGE</p></a></div>
<a href="12x5.html"><div class="imgWrap"><img src="images/albums/12x5.jpg" width="250" height="250"><p class="imgDescription">CLICK<br>TO<br>ENLARGE</p></a></div>
<a href="now.html"><div class="imgWrap"><img src="images/albums/now.jpg" width="250" height="250"><p class="imgDescription">CLICK<br>TO<br>ENLARGE</p></a></div>

Answer 1

默认情况下，div 是 block 元素，占据页面的整个宽度。为了让它们只占用它们需要的空间，您可以添加到您的 imgWrap 类:

display: inline-block

这将使它们能够显示在同一行上。我建议这是比 float 更好的解决方案，因为 float 会从正常文档流中删除元素并可能导致其他显示问题。其他内容不一定会正确地围绕它流动。将它们显示为 inline-block 可使它们保持正常的文档流，因此其他内容会自动在它们周围适本地自行排列。