Question

我正在尝试让我的tumblr网站上的图像彼此相邻，而不是彼此之上。我已经多次尝试过在论坛上发现的建议，但无法让它工作，所以问我的第一个论坛问题。

这是我正在处理的页面：http://dieinsel.tumblr.com/stories

我要添加更多图像（每个图像都是链接）。我希望这些图像能够彼此相邻（两者之间有一些空间）。

我删除了所有更改HTML的尝试，因此它又回到原来的版本：

<p><a href="http:blah"><img src="https:blah.jpg" /></a>&nbsp; &nbsp; &nbsp;<a href="http:blah2"><img src="https:blah2.jpg" /></a>&nbsp; &nbsp; &nbsp;<a href="http:blah3" style="line-height: 1.4;"><img src="https:blah3.jpg" /></a></p>

Answer 1

你有一个像这样的CSS：

.caption img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 30px auto 30px auto;
    border-radius: 2px;
}

您必须将其更改为：

.caption img {
    display: inline-block; // Here change block to inline-block
    max-width: 100%;
    height: auto;
    margin: 30px auto 30px auto;
    border-radius: 2px;
}

的 Demo

Answer 2

您希望使用display:inline-block或float: left/right＆amp;和/或margin＆amp;来设置图像（或其容器）的样式。给他们一个{{1}}以获得你的间距。

希望图像彼此相邻，而不是下方

2 个答案:

的 Demo