サイズの異なる複数の画像を整列する方法

Question

私は自分のCSSにブートストラップを使用しています。私はデータベースから50の画像を取る配列を持っています。画像のサイズは異なります。私は、画像の行が作成されるようにこれらの画像を整列させたいと思っていました。行はどのような高さ（いくつかの合理的な）の可能性があります。各行に異なる数の画像が存在する可能性があります。基本的には、私は多くのフォトギャラリーやストックホルムのウェブサイト（fotoliaやshutterstockなど）に触発されています。私が検索すると、彼らは私にそれぞれ100枚の画像を与えます。それぞれの画像も同じ大きさですが、幅は同じになります。私はこれらの企業が非常に大きいことを知っています。しかし、私はイメージが積層されるべきかを計算するために（それだけで、CSSでそれを行うことが可能であるか、それはまた、PHPを必要と理解したかった。

異なる寸法を有しているが、彼らは、このような方法で揃えることができ

画像。彼らはdiv要素の合計幅を取ること

私は最大幅と幅の値を設定することで何度も試みたが、彼らは私に必要な結果を与えることはありません。 誰もが私を助けてください。事前に感謝。

Answer 1

Flexboxはこのために素晴らしいです、私はJavascの束を試していた私は別のルートを見つけようとしたので、Flexboxは非常に簡単で（より良いIMOの）代替手段でした。 JSを複雑にするのではなく、CSSを使用しようとしているあなたに誇りを持ってください。

これはインターネット上で私が見つけたベストチュートリアルです。これは私があなたの靴の中にいたときに役立ちました。

正しい方向に向ける必要があります&あなたの内側の画像に最大の高さを設定することも考えてください。

ハッピーコーディングで、質問がある場合はお知らせください。

https://medium.com/@_jh3y/how-to-pure-css-masonry-layouts-a8ede07ba31a#.eule88uh2

、さらに - 親コンテナと内側の要素について理解するには、Flexのヘルパー：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

このようなものは、あなたが

<div class="flex-container"> 
    <img class="inner-image portrait" /> 
    <img class="inner-image landscape" /> 
    <img class="inner-image portrait" /> 
    <img class="inner-image landscape" /> 
    <img class="inner-image portrait" /> 
    <img class="inner-image landscape" /> 
    <img class="inner-image portrait" /> 
    <img class="inner-image landscape" /> 
</div> 

CSSを始めるかもしれません

.flex-container { 
    flex-flow: row; 
    justify-content: space-between; 
    align-items: flex-start; /* should align items to the top of your flex row if they don't reach 100px in height */ 
} 
.inner-image { 
    max-height: 100px; 
} 
.inner-image.portrait { 
    height: 200px; 
    width: 100px; 
} 
.inner-image.landscape { 
    height: 100px; 
    width: 200px; 
} 

これはテストされていませんが、概念的に正しいものでなければならず、私が含まれているリンクで理解して拡張することができます。