2

親の側にマージンがなく、フロートされたdiv間にのみマージンを作成することは可能ですか?

だから基本的に:

no margin <div> |margin| <div> |margin| <div> |margin| <div> no margin
no margin <div> |margin| <div> |margin| <div> |margin| <div> no margin
no margin <div> |margin| <div> |margin| <div> |margin| <div> no margin
no margin <div> |margin| <div> |margin| <div> |margin| <div> no margin
no margin <div> |margin| <div> |margin| <div> |margin| <div> no margin

そのように。

4

2 に答える 2

4

first-childおよびセレクターを使用してlast-child、それぞれ左/右マージンを指定しません。

http://jsfiddle.net/ExplosionPIlls/bzSgp/1

最初/最後のdivの間に他の要素がある場合は、代わりにfirst-of-type/を使用できます。last-of-type

于 2013-02-16T20:49:58.773 に答える
3

申し訳ありませんが、それを掘り下げるために、しかしそれはそのトピックに関するグーグル検索の後にちょうど現れました:

そのため、含まれている要素の幅がわかっている場合、ラッピングDIVに負のマージンを使用するCSSのみのソリューションがあることを指摘したいと思います(ここでは主にパーセンテージを使用します)

.wrapper { 
    margin: -1em;
    overflow:hidden; /* or other clearfix if you need overflow */
}
.item {
    margin: 1em;
    float:left;
    /* ... */
}

簡単なデモペンもまとめました。

たとえば、Bootstrapのグリッドシステムも同様に機能します。

-

このアプローチの大きな利点は、行に収まるアイテムの数を正確に知る必要がないことです(:nth-​​child()アプローチで知る必要があるため)。そのため、さまざまな画面サイズでの処理がはるかに簡単になります。

于 2015-02-16T13:13:08.777 に答える