Question

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

基本上，Tumblr在您添加的每个<p>周围添加<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位于p内，因此总共应用了100px填充。以下代码是一个脏修复，但显然没有响应：

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

那么如何摆脱图像的填充？非常感谢提前！

Answer 1

如果您可以为添加的<p>或周围添加一些标识符类型以用于图像案例，那么您可以为这种情况覆盖css：

myImage.p{
  padding:0;
}

或

myImage.div p{
  padding:0;
}

如果你不能 - 那么只有你选择的选择是你的修复或javascript修复。由于无法用css选择父元素。

Answer 2

因为你可能无法在tumblr添加的p标签中添加一个类，所以你必须将它转过来并在你自己的p标签中添加一个类，这样你就可以设置那些样式：

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

在<p>中定位<img/>并删除填充？</p>

2 个答案: