0

私はこのコードを持っています: http://jsfiddle.net/XXu8G/

要素を背骨の周りの中心に揃えたい。Isotope jQuery プラグインには、spine align と呼ばれる同様の機能があります。各面に複数のアイテムを配置したい。

これらは、「左」と「右」の div を分けずにどのように実現できますか?

4

1 に答える 1

2

このコードは CSS3 ブラウザーで動作します ( fiddle を参照してください。IE8 以下、およびそれをサポートしていないその他のブラウザーでは、スパイン センターを「ホップ オーバー」する必要があるすべての要素のクラスnth-childに置き換える必要があります)。私にとって正しく機能させるには、リストの一部にする必要がありました（ただし、以下のオプションの解決策を参照してください）。center-stamp

#container {
    width: 380px;
    margin: 0 auto;
    overflow: hidden;
}

#items li#center-stamp { 
    width:100px; 
    height:100px; 
    background:red; 
    margin: 0 -240px 0 140px;
}
#items li { 
    width:50px; 
    height:50px; 
    background:#ccc; 
    margin:10px; 
    float:left; 
    display:block; 
}

#items li:nth-of-type(4n) {
    margin-left: 110px;
}

オプションのソリューション

が純粋に表示用である場合は、そのcenter-stampように疑似要素に移動できます ( fiddle を参照)。

#container {
    width: 380px;
    margin: 0 auto;
    overflow: hidden;
}

#items:before { 
    content: '';
    width:100px; 
    height:100px; 
    background:red; 
    margin: 0 -240px 0 140px;
    float: left;
    display: block;
}
#items li { 
    width:50px; 
    height:50px; 
    background:#ccc; 
    margin:10px; 
    float:left; 
    display:block; 
}

#items li:nth-of-type(4n+3) {
    margin-left: 110px;
}

より「柔軟な」(まだ CSS3) ソリューション

柔軟な幅と要素の動的数という新しい要件については、要素の幅が標準であると仮定した純粋な CSS3 ソリューションがまだあります。これは、クエリ (おそらく、LESS や SCSS などの css プリプロセッサによって生成されるのが最適です) を賢明に使用することによって行われます。@mediaクエリの範囲を実際に制限する必要があります。ここにフィドルとそこからのcssコードがあります：

#container {
    width: 100%;
    overflow: hidden;
}

#center-stamp {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100px;
    margin-left: -50px;
    background-color: red;
    z-index: -1;
}

#items {
    overflow: hidden;
    width: 240px;
    margin: 0 auto;
}

#items li { 
    width:50px; 
    height:50px; 
    background:#ccc; 
    margin:10px; 
    display: block; 
    float: left;
}

#items > li:nth-child(2n) {
    margin-left: 110px;
}

@media all and (min-width: 380px) {
    #items {
        width: 380px;
    }
    #items > li:nth-child(2n) {
        margin-left: 10px;
    }    
    #items > li:nth-child(4n+3) {
        margin-left: 110px;
    }
}

@media all and (min-width: 520px) {
    #items {
        width: 520px;
    }
    #items > li:nth-child(4n+3) {
        margin-left: 10px;
    }    
    #items > li:nth-child(6n+4) {
        margin-left: 110px;
    }
}

@media all and (min-width: 660px) {
    #items {
        width: 660px;
    }
    #items > li:nth-child(6n+4) {
        margin-left: 10px;
    }    
    #items > li:nth-child(8n+5) {
        margin-left: 110px;
    }
}

注:重要なのは、幅を許可されたブロック数にリセットし、以前の幅のnth-childセレクターをオーバーライドして余白に戻し10px、新しいカウントを設定することですnth-child。

于 2012-07-24T17:10:12.310 に答える