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>

質問：

2行で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; 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;

デモ

于 2013-07-23T07:26:35.470 に答える
0

clear:right;CSS に、次のようなクラスを追加します。

.clearfix {
  clear:right;
}

次に、そのクラスを 3 番目の要素に追加し、その後の画像を別の行に追加します。

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

問題を解決するには、多くの方法があります。

1）すべてのサムネイルを囲むクラスを追加します

<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）「クリア：両方」を使用する

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

<div class="box">
...

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

...
</div>

お役に立てば幸いです。さよなら。

于 2013-07-23T07:50:57.703 に答える
0

次のように、最初の 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>

私は緑です、あなたを助けることができることを願っています!

于 2013-07-23T08:15:54.397 に答える
0

本当に float 属性を使用する必要がない限り、この属性を使用して、次のようにページの欠陥にdisplayどのように配置されるかを変更できます。divs

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

個人的にfloatは、よりクリーンな方法よりもこのアプローチを好みます (これらすべてclearとoverflow属性がどこからともなく好きになることはありません)。float他の要素を配置するときに面倒な属性が含まれている可能性があります。

デモ

于 2013-07-23T07:29:00.410 に答える