20

私の問題は、同じクラスのdivが2つ（またはそれ以上）あり、それらを互いに離す必要があることです。ただし、マージンを直接使用することはできません。最後または最初の要素にもマージンが適用されるため、これは望ましくありません。

例
-緑は私がスペースを望んでいるところです-赤は私がそれ
を望まないところです

私が考えることができる唯一の解決策は複雑であり、値をハードコーディングする必要があるため、誰かがこの問題に対する巧妙で単純な解決策を考えてくれることを望んでいます。

詳細：時々、これらのdivはそれ自体であり、まれに浮かんでいました。

上記のアイデアがどのように優れているか、新しいアイデア、または一般的なヘルプについてのアドバイスをいただければ幸いです;）

4

4 に答える 4

28

次のようなことを試すことができます。

h1{
   margin-bottom:<x>px;
}
div{
   margin-bottom:<y>px;
}
div:last-of-type{
   margin-bottom:0;
}

h1または最初のルールの代わりに:

div:first-of-type{
   margin-top:<x>px;
}

または、隣接する兄弟セレクターを使用することをお勧めします。次のセレクターを使用すると、1 つのルールでケースをカバーできます。

div + div{
   margin-bottom:<y>px;
}

それぞれ、h1 + divヘッダーの後の最初の div を制御し、追加のスタイル オプションを提供します。

于 2012-06-13T12:25:27.967 に答える
9

IE6 のサポートが必要ない場合:

h1 {margin-bottom:20px;}
div + div {margin-top:10px;}

2 行目は div 間にスペースを追加しますが、最初の div の前または最後の div の後に追加しません。

于 2012-06-13T12:33:36.557 に答える
5

マージンを使ってみませんか？要素にすべての種類のオフマージンを適用できます。その周りのマージン全体だけではありません。

これは複数の要素を参照しているため、cssクラスを使用する必要があります。また、具体的に異なるものにしたい場合はIDを使用できます。

すなわち：

<style>
.box { height: 50px; background: #0F0; width: 100%; margin-top: 10px; }
#first { margin-top: 20px; }
#second { background: #00F; }
h1.box { background: #F00; margin-bottom: 50px;  }
</style>

<h1 class="box">Hello World</h1>
<div class="box" id="first"></div>
<div class="box" id="second"></div>​

jsfiddleの例を次に示します。

参照：

于 2012-06-13T12:29:33.050 に答える
2

もちろん、DIVは、分割する以外に、本質的に有用な意味を欠いています。

最善の行動は、意味のあるクラス名を追加し、CSSで個々の余白のスタイルを設定することです。

<h1>Important Title</h1>
<div class="testimonials">...</div>
<div class="footer">...</div>

h1 {margin-bottom: 0.1em;}
div.testimonials {margin-bottom: 0.2em;}
div.footer {margin-bottom: 0;}
于 2012-06-13T12:41:53.287 に答える