3

在过去的几天里，我尝试学习 CSS 和 HTML，以便为 Tumblr 制作我的第一个自己的主题（不要评判我，这似乎是一个测试事物的好平台）。我遇到了几个我可以自己解决的问题，但现在我已经知识枯竭了，谷歌无法帮助我。我也试过搜索这个网站，但没有成功。所以如果已经有关于这个的话题，我非常抱歉。

基本上，Tumblr 会在您添加的<p>每个标签周围添加一个 -Tag <img>，因此我应用于 p 的填充也会应用于图像，我无法覆盖它。一个肮脏的修复工作了一段时间，但是当我试图让网站响应时，我找不到任何解决方法或修复。

这是条目的基本 HTML 结构：

{block:Text}
    <div class="postcard">
        {block:Title}
            <a href="{Permalink}"><h2>{Title}</h2></a>
        {/block:Title}
        <div class="text">
            {Body}
        </div>
    </div>
{/block:Text}

结果是：

<p>Duis autem vel eum iriure dolor.</p>

<p><img src="http://i.minus.com/dbmLqVdFyHN5Tg/16.jpg" alt=""/></p>

我想在段落的两边都有一些填充，在段落的末尾有一些间距，所以我添加了这个 CSS：

.postcard p, ul {
    padding-right: 50px;
    padding-left: 50px;
    margin-bottom: 25px;
}

到目前为止，一切都很好。现在，这里的主要问题是：帖子中的图像应该覆盖整个宽度.postcard，同时也是响应式的。使用max-width: 100%;会起作用，但是因为 img 在 ap 内，所以总共应用了 100px 的填充。以下代码是一个肮脏的修复，但显然没有响应：

.text img {
    width: 700px;
    height: auto;
    display: block;
    margin: 0px -50px;
}

那么我怎样才能摆脱图像的填充？提前谢谢了！

4

2 回答 2

1

如果您可以<p>为图像案例添加一些标识符类型来添加或围绕它，那么您可以在这种情况下覆盖 css：

myImage.p{
  padding:0;
}

或者

myImage.div p{
  padding:0;
}

如果你不能——那么你剩下的唯一选择就是你的修复或javascript修复。由于无法使用 css 选择父元素。

于 2012-08-11T10:13:28.827 回答
0

由于您可能无法将类添加到 tumblr 添加的 p 标签中，因此您必须将其转过来并将类添加到您自己的 p 标签中，以便您可以设置这些样式：

.postcard p.padded {
  padding-right: 50px;
  padding-left: 50px;
  margin-bottom: 25px;
}
于 2012-08-11T12:24:51.050 回答