左揃え最後ギャラリー行

Question

私はのように見える絵ギャラリー持っている：私は好き

.wrapper { 
    background: #ff0000; 
    text-align: center; 
} 

#squares { 
    background: #00ff00; 
    display: inline-block; 
    vertical-align: top; 
    width: 300px; 
} 

#squares img { 
    max-height: 200px; 
    width: auto; 
} 

#squares h5 { 
    margin: 20px 0; 
} 

：CSSがどのように見える

<div class="wrapper"> 
    <div id="squares"> 
     <a href="yourlinkhere1.php"><img src="images/galleryimage1.jpg"></a> 
     <h5>IMG_114</h5> 
    </div> 
    <div id="squares"> 
     <a href="yourlinkhere2.php"><img src="images/galleryimage2.jpg"></a> 
     <h5>IMG_115</h5> 
    </div> 
</div> 

：のようなコードに見える

をどのようになったのですか？IMG_117はIMG_114の下に並んでいますが、緑色の領域は中央に、divのコンテンツは中央に... Nそのdivをun-centeringすることなくleftを整列させる方法を確かめてください。

これは、私のCSSやおそらくいくつかのjQueryを使って、IMG_117行にさらに2つの列を追加することができると考えていました。私が見る問題は、これは動的なコンテンツであり、最後の行にどれくらいの数があるかはわかりません... 1つ、2つ、または3つの可能性があります。いくつかのjQueryがある場合は、アイテムが行内にあり、欠落している列を追加します。

どのアプローチが最も簡単か、そこにはよりよい解決策があるかどうかはわかりません。誰かがアイデアを持っているのですか、誰かが正しい方向に向けることができますか？

おかげで、
ジョシュは最初.squares

IDを持つクラス= HTML で "正方形" と#squaresですべてのid = "四角" を置き換えるに

Answer 1

フレックスボックスソリューションをより柔軟で柔軟なレイアウトに使用するには、ソリューションを下記のcodepenでご覧ください。

.wrapper { 
    background: #ff0000; 
    text-align: center; 
    width: 100%; 
    height:auto; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-wrap: wrap; 
    flex-wrap: wrap; 
    padding: 0 5% 0; 
} 

Codepen

https://codepen.io/ahmedi/pen/KvVgQW 

Answer 2

- ユニークな識別子であることを意味しページのDOM要素の

は、あなたのCSSに追加します。

.squares { 
    float: left; /* all elements will tend to left*/ 
} 
.wrapper { 
    clear: both; /* reset rules of floating for the next elements*/ 
}