2

大きな div (灰色) とその近くに多数の div (黒色) を含む Web ページを作成する必要があります (フロート左)。

現時点margin-rightでは、黒い div を分割するマージン ( ) を使用しています。(灰色の div は完了しているので気にしません。) 私の問題は、各行の最も右の divmargin-rightに . margin-right: 0すべての黒い div が動的に追加されるため、特定のクラス ( ) を作成できません。私の問題の解決策はありますか？

4

3 に答える 3

1

http://jsfiddle.net/aFkfm/1/

HTML:

<div id="wrapper">
  <div id="big"></div>
  <span></span>
  <span></span>
  ....
</div>

CSS:

div#wrapper {
    margin-left: -20px;
}
div#big {
    float: left;
    width:  220px;
    height: 220px;
    margin-left: 20px;
}
span {
    float: left;
    width: 100px;
    height: 100px;
    margin-left: 20px;
    margin-bottom: 20px;
}​
于 2012-12-30T12:36:45.983 に答える
1

すべてのボックス (たとえば ) に同じマージンを設定してmargin: 5pxから、単純margin: -5pxにコンテナーに設定します: http://jsfiddle.net/ZKJeN/

body {
    background: #f3f3f3;
    padding: 15px;
}

/* Container */
ul {
    width: 300px;
    overflow: hidden; /* Clearfix */
    margin: -5px; /* To compensate for the 5px margin around each box */
    list-style: none;
}

    /* Small */
    ul li {
        background: #fff;

        float: left;
        width: 40px;
        height: 40px;
        margin: 5px;

        border: 5px solid #000;
    }

    /* Big */
    ul li:first-child {
        width: 100px;
        height: 100px;
    }
于 2012-12-30T12:42:38.077 に答える
-1

nth-child セレクターを使用してスタイルを設定できます。がサイクル サイズで、がオフセットである特殊な形式(an+b)があります。ab

.blackboxes:nth-child(3n+0) {margin-right:0}
.blackboxes:nth-child(5n+6) {margin-right:0}
.blackboxes:nth-child(3n+6) {margin-right:5px}

物事を正しく行うには、6 を 7 にする必要があるかもしれません。

最終的なスタイリングは、6 つのブラック ボックスの最初のグループを効果的に分離する最初のものをオーバーライドすることを意図していることに注意してください。

于 2012-12-30T12:34:56.760 に答える