0

次の図に示すように、div の下部にぴったりと収まる段落タグ内にテキストがあります: http://i44.tinypic.com/e05s0z.png

これを修正するために div の下部にパディングを配置することもできますが、そのページにあるアイテムの数によっては、複数の div が存在する可能性があります。

私がする必要があるのは、最後の div の終わり (class="article") と段落タグ内のテキストの間にスペースを入れることです。

article クラスの CSS は次のとおりです。

.article {
  padding:10px;
  overflow:auto;
}

段落タグ付きのテキスト

<p>Herkimer County Community College does not 
discriminate on the basis of race, color, sex, 
national origin, age, handicap, or marital status 
in admission, employment, or in any aspect regarding 
the conduct of College business.</p>

私は何をすべきか？

4

7 に答える 7

4

最後の段落に id (おそらく #disclaimer) を付けてから、padding-top を持つようにスタイルを設定します。

<p id="disclaimer">Herkimer County Community College does not 
discriminate on the basis of race, color, sex, 
national origin, age, handicap, or marital status 
in admission, employment, or in any aspect regarding 
the conduct of College business.</p>

と...

#disclaimer {
 padding-top: 10px;
}

[編集] あなたのコメントに基づいて、これに代わる方法は、記事を div で囲み、その div.class に下マージン/パディング スタイルを与えることです。

于 2009-06-30T13:25:05.193 に答える
3

Web サイトに他の段落があり、それに ID やクラスを与えたくない場合は、次を使用することもできます

.article + p {padding-top: 10px;}

一部の古いブラウザでは、このセレクタを認識できませんが、

于 2009-06-30T13:29:21.973 に答える
2

私が見る限り、ここにあなたのオプションがあります：

  1. :last-childCSS3 疑似クラスを使用して、最後の div をターゲットにします。これは IE ではまったくサポートされていないため、これがオプションであるかどうかは、そのブラウザがどれだけ重要かによって異なりますが、少なくとも他のブラウザでは目的の効果が得られます。

    .article:last-child { padding-bottom: 20px; }

  2. 上記と同じスタイルでクラスを最後の div に追加します。これは理想的ではなく、div がどのように生成されるかによって可能になる場合と不可能になる場合があります。

  3. 値を持つ p タグにクラスを追加しpadding-topます。

  4. セレクターを使用.article + pして、.article の直接の兄弟である ap タグをターゲットにします。これは IE7 ではサポートされていますが (私が思うに)、IE6 ではサポートされていません。

HTML の混乱を減らすため、常に #1 または #4 を優先しますが、前述したように、ニーズによっては IE が問題になる可能性があります。

（＃4のResiduumに感謝）

于 2009-06-30T13:33:09.267 に答える
2

上部にパディングがあるコンテナーで段落をラップすることができるので、その上に何があるかは問題ではありません。

たとえば、次の css で div にラップします。

div.finaltext {
   clear: both;
   margin-top: 10px;
}
于 2009-06-30T13:26:29.340 に答える
1

first-child と last-child のcss メソッドもあります

注：サポートしたいブラウザの互換性を確認してください

于 2009-06-30T13:32:15.257 に答える
-2

それはこのような構造ですか?:

<div class="article">jdhfksdjhfksdhk</div>
<div class="article">jdhfksdjhfksdhk</div>
<div class="article">jdhfksdjhfksdhk</div>
<p>kfdhsjkfdks</p>

padding: 10px を使用して、div の内側のマージンが 10px になるようにします。

CMS の場合、段落のテキストを別のタグ (DIV) または (P) のクラス内にラップできると確信しています。そうでない場合は、すべての記事の div と p タグを囲むラッパーがあるかどうか尋ねてもよろしいですか?

その場合、CSS を使用して P タグにアクセスできます。そうでない場合、すべてのブラウザーでこれを実現する方法はありません。

または...ここでトリックができることに気づきました。ただし、記事の div の上に選択可能な div があることを確認する必要があります。

次のようになります。

.article { margin-top: -5px; margin-bottom: 15px; }

したがって、すべての div.article は 5 ピクセル上に移動し、記事の div 間に 10 ピクセルの実際のマージンを残します。しかし、最後のものには -5px が上に移動しないため、P タグの下マージンは 15px になります。

数字をいじって、最も快適な数字にすることができます。さらに制御が必要な場合は、10px に設定したパディング値をあらゆる方法で使用し、それに応じて設定してマージン オフセットを補正します。

于 2009-06-30T21:03:24.900 に答える
-4

<br/>最後の div の後にいくつかのタグを追加していただけませんか?

于 2009-06-30T13:26:46.190 に答える