3

ここ数日、私は Tumblr 用の最初の独自のテーマを作成するために、CSS と HTML を学ぼうとしました (判断しないでください。物事をテストするための良いプラットフォームのように思えました)。自分で修正できたいくつかの問題に遭遇しましたが、今では私の知識の限界に達しており、Google は私を助けることができませんでした. 私もこのサイトを検索しようとしましたが、成功しませんでした。ですので、すでに話題になっていたら大変申し訳ありません。

基本的に、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 に答える