1 
<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张图片，所以我<br />在前3张图片之后使用，但它不起作用，最后3张图片仍然显示在前3张图片的右侧，它们只是从新行开始，可以有人解释为什么会这样吗？以及如何解决？

4

8 回答 8

3

试试这个并删除 Br Tag

.clr{clear:both;}

换成 br这个 <div class="clr"></div>

演示

于 2013-07-23T07:24:55.130 回答
1

无需修改标记，您可以将 br 设置为clear: both; 演示

但最好的做法是像这样包装你的 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;

演示

于 2013-07-23T07:26:35.470 回答
1

看看这个：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>
于 2013-07-23T07:35:48.690 回答
0

在您的 css 中添加一个clear:right;类似这样的类：

.clearfix {
  clear:right;
}

现在将该类添加到您的第三个元素中，并且它之后的图像应该转到另一行。

CSS：在 MDN 上清晰的文档

于 2013-07-23T07:26:16.360 回答
0

试试这个

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

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

.clearboth{
    clear:both;
}
于 2013-07-23T07:26:37.183 回答
0

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

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

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

演示

于 2013-07-23T07:29:00.410 回答
0

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

1）添加一个包含所有缩略图的类

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

</style>

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

2) 使用 CSS3“列计数”但在 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）使用“清除：两者”

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

<div class="box">
...

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

...
</div>

我希望我是有帮助的。再见。

于 2013-07-23T07:50:57.703 回答
0

You can put the first 3 images in a div , then put the second 3 images in another div , css styling for each div with "clear:both",like this:

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

I'm green ,hope that can help you !

于 2013-07-23T08:15:54.397 回答