0

我的博客文章有一条规则：

p + p {
text-indent: 1.5em;
}

在 div 中定义：

.entry-content{
    padding: 2em 3em 4em;
}

我在<p>定义中有一些图片，如下所示：

p > img {
    margin-bottom: 0.5em; 
    max-width: 96%; 
    height: auto;
    text-indent: 0em;
}

发生的事情是：首先调整图像的大小在应用缩进之前发生，所以图片的右边距超出定义的填充（3em）缩进的大小（1.5em），不应该缩进后调整图像大小？

然后即使text-indent: 0em;图像仍然遵循 p+p 的规则并有缩进。

我解决了将最大宽度设置为 96% 而不是 100% 的问题，但是没有更合乎逻辑的方法来解决这个问题吗？

谢谢

4

1 回答 1

1

图像的max-width宽度由p包含图像的宽度决定。text-indent不会改变 的宽度p，但会移入文本/图像，这将导致图像悬垂。最重要的是，您看到的是正确的行为。

您需要修改您的 html/css 以获得所需的结果。如果没有更完整的示例，我无法提供替代方法。您可以尝试position: absolute图像，这将导致图像转到左上角（忽略text-indent和padding）。如果您尝试此操作，请不要忘记设置position: relative包含p.

p + p {
    text-indent: 1.5em;
    position: relative;
}

p > img {
    margin-bottom: 0.5em; 
    max-width: 96%; 
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
}
于 2012-05-07T16:19:00.630 回答