0

この画像ギャラリーの例では、次のようになります。

http://www.w3schools.com/css/tryit.asp?filename=trycss_float_elements

<head>
<style>
.thumbnail 
{
     float:left;
     width:110px;
     height:90px;
     margin:5px;
}
</style>
</head>

<body>
<h3>Image Gallery</h3>
<p>Try resizing the window to see what happens when the images does not have enough    room.</p>
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
</body>
</html>

.thumbnailクラスから幅を削除すると、画像は間にスペースを入れずに並べて配置されます。ただし、フロートのない通常の画像要素の場合、自動的にある程度のマージンがあるようです。一般的な動作を理解する必要があります。floatの動作は、それらが隣り合って配置されることです。画像要素の余白に影響を与えるのはなぜですか？

助けてくれてありがとう。

4

2 に答える 2

1

マージンを持つことができるのはブロック要素のみです。

追加：

display:blockあなたのCSSに

于 2013-03-25T17:06:33.767 に答える
0

各画像には独自の幅サイズがあります。クラスで幅のサイズを設定しなかった場合、画像は適切に配置されません。クラスで幅を宣言する場合は、その画像のコンテナを作成するようなもので、その画像の幅に関係なく、それに応じて110ピクセルにサイズ変更されます。はい、フロートはすべての画像を並べて配置します。

于 2013-03-25T19:02:16.973 に答える