使用CSS在图库中定位图像

Question

I'm new to css. I have created a gallery with 6 images. I have chose float: left. My issue is, the pictures are all on same line as each other. I want to have 3 on top and 3 below. How do I make this happen? Thanks

Answer 1

您可以将图像包围在<div></div>标记内并在其上设置width属性或max-width，另一个选择是可以在每个图像后使用<br />跳到下一行。

Answer 2

There are many ways to do this so it depends on what fits your needs.

You can add a <br> tag right after the 3rd image to display a new line. (or wrap the new line in a paragraph <p><!-- code --></p> ).

Another way is wrapping your content in a block element. For example, a DIV .

Being that you're new to CSS I suggest starting off with good coding practices.

My snippet below is for RWD .

What I did is I wrapped my images in a div and used percents for the image size. By default images are displayed inline this will not go in a new line. The only time this happens is when they can't fill the space in the container. (if you want to have it float left without going on a new line; you would use white-space : nowrap .

You may also want to take a look at CodePen . It's a community where they post live snippets of code that you can interact with (not to mention learn from). Plus Codepen supports lots of Preprocessors .

Hope this helps to get started.

 .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>