Question

<style>
.thumbnail
{
float: left;
width: 60px;
border: 1px solid #999;
margin: 0 15px 15px 0;
}
</style>
<div class="thumbnail">
<img src="images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>

<br />
<div class="thumbnail">
<img src="images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>
<div class="thumbnail">
<img src="images/image.gif" alt="" width="60" height="60"><br>
Caption
</div>

问题：

我想在两行中显示6个imgs，所以我在前3个图像后使用<br />，但它不起作用，最后3个imgs仍显示在前3个imgs的右侧，它们刚从一条新线开始，任何人都能解释为什么会这样吗？以及如何解决它？

Answer 1

试一下并删除Br Tag

.clr{clear:both;}

将 br替换为此<div class="clr"></div>

<强> Demo

Answer 2

没有触及标记，您可以将br设置为clear: both; demo

但最佳做法是像这样包装你的div

<div>
<!---your floating div-->
<!---your floating div-->
<!---your floating div-->
</div>
<div>
<!---your floating div-->
<!---your floating div-->
<!---your floating div-->
</div>

然后您可以申请display: table-row;

demo

Answer 3

检查出来：http://jsfiddle.net/sheriffderek/4KMhC/

<br />用于换行符 - 它用于内联元素。它不会与花车一起玩。

浮子就像重力转向侧面......有点......

你想要将.thumbnails浮动 - 然后，基于它们的外部容器，在这种情况下，身体......它们将具有左方向引力并且当它们用完房间时自然地断开（到下一个“线”）或者你选择考虑它。如果你问一个更详细的问题 - 我可能会给你一个更详细的答案。当你准备好时，请告诉我。我希望这有助于/并且不那么敏感以至于它是可怕的。

CSS

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
/* use box-sizing --- it moves the padding inside the box instead of outside ... win! */

html, body { /* basic reset */
    margin: 0;
    padding: 0;
}

.thumbnail {
    float: left;
    width: 33.33333%;
    border: 1px solid #999;
}

.thumbnail img {
    display: block;
    width: 100%;
    height: auto;
}

HTML

<div class="thumbnail">
    <img src="http://placehold.it/100x100" alt="thumbnail" />
    <h3>Caption</h3> <!-- arbitrary img size -->
</div>

Answer 4

在你的css中添加一个类似clear:right;的类：

.clearfix {
  clear:right;
}

现在将该类添加到第3个元素，然后将图像添加到另一个元素。

CSS: clear documentation on MDN

Answer 5

试试这个

http://jsfiddle.net/HPyXZ/2/

   .thumbnail
{
float: left;
width: 60px;
border: 1px solid #999;
margin: 0 15px 15px 0;
}

.clearboth{
    clear:both;
}

Answer 6

除非您确实需要使用float属性，否则可以使用display属性来更改divs在页面漏洞中的定位方式，如下所示：

.thumbnail{
    display:inline-block;
    width: 60px;
    border: 1px solid #999;
    margin: 0 15px 15px 0;
}

我个人更喜欢这种float方法，因为它更干净（从来没有真正喜欢所有那些clear和overflow属性，实际上解释了你在做什么（即你希望它们的div显示为相同的行块），不涉及float属性，这在定位其他元素时可能会很麻烦。

Demo

Answer 7

要解决您的问题，有很多方法：

1）添加一个包含所有thumbanil

的类

<style>
...
.box{ width:300px;}

</style>

<div class="box">
...
</div>

2）使用CSS3“column-count”但在IE9中不起作用

<style>
.thumbnail
{
width: 60px;
border: 1px solid #999;
margin: 0 15px 15px 0;
}
.box{column-count: 3;
-webkit-column-count: 3;
-moz-column-count:3;
width: 300px;
}

</style>

从缩略图中删除浮动，如果您有更多缩略图，则可以选择列数。

3）使用“clear：both”

<style>
.clear{clear:both;}
</style>

<div class="box">
...

<div class="clear"></div>

...
</div>

我希望我能提供帮助。再见。

Answer 8

你可以将前3个图像放在div中，然后将第3个图像放在另一个div中，为每个div设置css样式并使用“clear：both”，如下所示：

<style type="text/css">
  .img_wrap{clear:both;}
</style>
<div class="img_wrap">
  <div class="thumbnail"></div>
  <div class="thumbnail"></div>
  <div class="thumbnail"></div>
</div>
<div class="img_wrap">
  <div class="thumbnail"></div>
  <div class="thumbnail"></div>
  <div class="thumbnail"></div>
</div>

我很绿，希望能帮到你！

当使用float：left时，如何使图像以两行显示

8 个答案: