0

6 列の 2 行を表示し、ブラウザー ウィンドウが縮小すると縮小するようにしようとしています。元のcssは、画像サイズに応じて列の数を表示し、各画像は左に浮かんでいるため、画面サイズが異なると、大きなスペースができてしまいます。

.ngg-albumoverview {
    overflow: hidden;
    margin-top: 1px;
        margin-left: 0px;
    width: 100%;
    clear:both;
    display:block !important;
}

.ngg-album {
    float:left;
    height: 100%;
    padding: 0px;
    margin-bottom: 0px;
    border: 0px solid #fff;

}

/* IE6 will ignore this , again I hate IE6 */
/* See also http://www.sitepoint.com/article/browser-specific-css-hacks */
html>body .ngg-album {
    overflow:hidden;
    padding: 0px;
    margin-bottom: 0px;
    border: 0px solid #cccccc;
}

.ngg-album {
    overflow: hidden;
    padding: 0px;
    margin-bottom: 0px;
    border: 0px solid #cccccc;

}

.ngg-albumtitle {
    text-align: left;
    font-weight: bold;
    margin:0px;
    padding:0px;
    font-size: 1.4em;
    margin-bottom: 0px;
}


.ngg-thumbnail {
    float: left;
    margin-bottom: 10px;
    margin-right: 2px;
    text-align: center;
    font-weight:bold;
background-color:#0F0F0F;
-webkit-border-radius: 0px 0px 8px 8px;
-moz-border-radius: 0px 0px 8px 8px;
border-radius: 0px 0px 8px 8px
}


.ngg-thumbnail img {
    background-color:#A9A9A9;
    border:0px solid #1D1D1D;
    display:block;
    margin:4px 0px 4px 5px;
    padding:4px;
    position:relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width:200px;
}

.more {
    width: 100%;
    background-color:#0F0F0F;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px
}



.ngg-thumbnail:hover {
    background-color: #333333;
}

.ngg-thumbnail img:hover {
    background-color: #FFFFFF;
}

.more:hover {
    background-color: #333333;
}

.ngg-description {
    text-align: center;
}

この css を .ngg-albumoverview に追加すると、6 つの列が正常に表示されて縮小されますが、2 番目の画像は最初の画像の横ではなく下に配置され、3 番目の画像は最初の画像の横に配置されます。

columns:100px 6;
-webkit-columns:100px 6; /* Safari and Chrome */
-moz-columns:100px 6; /* Firefox */
4

1 に答える 1

0

CSScolumnsはページの単なる分離であり、ページの残りの部分と同じように流れます。画像は次のように配置されます。

[1][3][5]
[2][4][6]

ページの流れは上から下に進み、要素の幅に応じて必要に応じて拡張されるためです。

columnsを削除してレスポンシブ グリッドに置き換えない限り、画像は希望どおりの順序にはなりません。画像を次のように表示したい場合：

[1][2][3]
[4][5][6]

幅をパーセンテージに調整する必要があります.ngg-thumbnail（マージン、ボーダー、パディングの間隔を間に組み込み、そのうちの 3 つの間で 100% 近くになり.ngg-thumbnail imgますmax-width: 100%;）height: auto;。.ngg-thumbnailまたは、すべてを完全にサイズ変更しない限り、ドキュメントフローから削除され、グリッドに整列しimgません (そして、それを望まない場合) 。

ほとんど忘れていました-clear: left;幅の合計が100％にならない場合は、4番目の画像にaを追加して、デフォルトで新しい行から開始するようにしてください. 次の方法で 4 番目の画像を選択できます。

.ngg-thumbnail img:nth-of-type(4);

これについて楽しく学びたい場合は、こちらのリソースが役立ちます。

于 2013-10-19T11:07:14.557 に答える