1

div内のリスト項目を使用していくつかの画像を表示しています。シンプルな CSS の float:left トリックを使用すると、次のレイアウトを取得できます。 現在

しかし、私はdivの幅と高さに基づいて動的に配置し、次のようなものが必要でした: 欲しかった

CSS、JavaScript、または jQuery を使用して同じことを達成する方法があれば教えてください。

また、これらのサンプル スクリーンショットが役に立たず、HTML コードが必要な場合はお知らせください。

ありがとう

編集: 石工プラグインを適用した後に画像を追加します (下の画像 3 を参照)。これで、同じ数の画像があり、それらは等間隔で適切な溝があります。ただし、常に左揃えです。これを常に中央揃えにするにはどうすればよいですか?

次のコードがあります。

<div id="container">
    <img src="" class="myimage">
    <img src="" class="myimage">
    <img src="" class="myimage">
    <img src="" class="myimage">
</div>

そして石積み部分のjQuery：

$('#container').masonry({ "ガター": 10, itemSelector: '.myimage' });

ここに画像の説明を入力

EDIT 2:石工プラグインを適用した後、右マージンの問題を示すjsfiddleも作成しました。それぞれのケースで正しいギャップを確認するには、ブラウザーのサイズも変更してください: http://jsfiddle.net/5KyRd/7/

4

3 に答える 3

1

CSS3 プロパティ calc を使用できます。

html:

<div id="container">
    <img src="">
    <img src="">
    <img src="">
    <img src="">
</div>

CSS:

#container{
    width:600px;
}
img{
    width:calc(600px / 4);
}

デスクトップとモバイルのすべての主要な Web ブラウザーでサポートされています。もちろん、古いブラウザーではサポートされませんが、レスポンシブ/流動的なレイアウトでは非常に役立ちます. よく使います。

編集: 言い忘れましたが、残念ながらデフォルトの Android ブラウザーでは動作しませんが、それは私のサイトのデスクトップ バージョンでの使用を止めるものではありません。

于 2013-07-14T08:48:59.110 に答える
0

を使用してコンテナを中央に配置できますdisplay:table

#container {
    display: table;
    margin: 0 auto;
}
于 2013-07-14T09:45:26.637 に答える