0

2つの<div>要素があり、それぞれが同じクラスを持っています。それらを2列のレイアウトにするのは簡単です:http://jsfiddle.net/Baumr/nbzHA/3/

だからここにキャッチがあります:

それらの間に空白を追加するにはどうすればよいですか?

2つの別々のクラスを作成し、どちらの方法でもフロートさせるのは簡単です。または、クラスを1つに追加して、マージンを使用します:http: //jsfiddle.net/Baumr/sZehH/1/

しかし、彼らが同じクラスにいる/クラスがない場合はどうなりますか?

4

2 に答える 2

1

:nth-child(n)またはなどの疑似クラスを使用できます:first-child

section div:nth-child(1) { margin-right: 10%; }

于 2012-10-28T02:07:16.113 に答える
1

最初のdivにを追加するのclassが最良のブラウザ互換性ソリューションであり、次にこのクラスのスタイルを追加します。

あなたのフィドルで私が気付いたことがあります。それは、ニールへのあなたのコメントに基づいて解決策を見つけるのを複雑にします。フィドルにタグがありsection、html5をサポートするブラウザでレンダリングされます。しかし、IE7およびIE6との互換性が必要ですか?

IE7にはいくつかの方法がありますが、以下はその1つです。

.section div+div {
    margin-left: 10%;
}

このソリューションでは、2番目のdivにマージン左を追加した隣接する兄弟セレクターを使用します。また、sectionタグの代わりに、class=sectionをサポートしていないブラウザの利点のために<>divを使用しますsection

の場合IE6、2つの<> divのいずれかにクラスを追加することが、私が知っている唯一の解決策です。

于 2012-10-28T04:37:07.867 に答える