ギャラリーで画像の位置をCSSで

Question

私はCSSを初めて使っています。 6枚の画像でギャラリーを作成しました。 私はfloat：leftを選択しました。 私の問題は、写真がすべて同じ線上にあることです。 私は上に3つ、下に3つ持っていたい。 どうすればいいですか？ありがとう

Answer 1

これを行うには多くの方法がありますが、ニーズに応じてさまざまです。

3行目の直後に<br>タグを追加して新しい行を表示することができます。 （または段落<p><!-- code --></p>に新しい行をラップします）。

もう1つの方法は、内容をblock要素にラップしています。たとえば、DIVです。

あなたはCSSの新機能であることを覚えておいて、良いコーディング手法を使い始めることをお勧めします。

下記の私のスニペットはRWDです。

私が何をしたかは、divでイメージをラップし、イメージサイズにパーセントを使用したことです。デフォルトでは画像が表示されますinlineこれは新しい行には入りません。これが起こる唯一の時間は、コンテナ内のスペースを埋めることができないときです。あなたはそれが新しい行に行かなくても左フロート持つようにしたい場合は（;あなたはwhite-space: nowrapを使用することになり

をあなたはまたCodePenを見てみたいことがありそれは、彼らは、あなたができるコードのライブスニペットを投稿コミュニティです。対話（から学ぶ言うまでもありません）。プラスCodepenはPreprocessorsの多くをサポートしています。

希望はこれが始めるのに役立ちます。

.images { 
 
    text-align: center; 
 
} 
 

 
.images img { 
 
    width: 30%; 
 
}

<div class="images"> 
 
    <img src="http://wallpapershdnow.com/download.php?f=animals/bears/baby-bears/baby-bear-wallpaper-4.jpg"> 
 
    <img src="http://i.imgur.com/3eouyHS.jpg"> 
 
    <img src="http://cdn4.teen.com/wp-content/uploads/2012/12/baby-polar-bears-main1.jpg"> 
 
    <img src="http://cdn1.theodysseyonline.com/files/2015/11/14/6358312506953272101532239493_l-Baby-bear.jpg"> 
 
    <img src="http://i.imgur.com/wYFHJNI.jpg"> 
 
    <img src="http://image.mlive.com/home/mlive-media/width960/img/grandrapidspress/photo/2015/03/20/-6328b3da95a15820.JPG"> 
 
</div>

Answer 2

<div></div>タグの内側に画像を囲み、その上に幅プロパティまたは最大幅を設定するか、または他のオプションを使用して、各画像の後に次の行にジャンプすることができます<br />を使用できます。