Question

我是css的新手。我创建了一个包含6张图片的图库。我选择了浮动：左。我的问题是，这些图片都是彼此相同的。我希望有3个在顶部，3个在下面。我该如何实现这一目标？感谢

Answer 1

您可以将图片包围在<div></div>标记内并在其上设置宽度属性或最大宽度，或者另一个选项是您可以在每个图像后使用<br />跳转到下一行。

Answer 2

有很多方法可以做到这一点，这取决于你的需求。

您可以在第3张图片后面添加 <br> 标记以显示新行。（或将新行包装在段落<p></p>中）。

另一种方法是将您的内容包装在block元素中。例如，DIV。

由于你是CSS的新手，我建议从良好的编码实践开始。

下面的我的代码段是RWD。

我所做的是将图像包裹在div中并使用百分比来表示图像大小。默认情况下，图像显示inline，这不会换行。这种情况发生的唯一时间是它们无法填充容器中的空间。（如果你想让它在不换行的情况下向左浮动;你会使用white-space : nowrap。

您可能还想查看CodePen。它是一个社区，他们发布了您可以与之交互的实时代码片段（更不用说从中学习）。加Codepen支持大量Preprocessors。

希望这有助于开始。

＆＃13;

.images {
  text-align: center;
}

.images img {
  width: 30%;
}

＆＃13;

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

＆＃13;

用css在图库中定位图像

2 个答案: