【笔记】浮动属性float的应用04—浮动图像缩略图库（所有步骤组合在一起）

最新推荐文章于 2025-04-27 18:10:36 发布

翻译最新推荐文章于 2025-04-27 18:10:36 发布 · 248 阅读

笔记专栏收录该内容

37 篇文章

订阅专栏

本文介绍了一种使用CSS浮动属性和边距控制，使多个图像和标题缩略图在网页上并排显示的布局技巧。通过设置div元素的浮动、宽度、边框、边距和填充，实现了缩略图的整齐排列，同时提供了换行和调整布局的解决方案。

第1步 - 从一些缩略图和标题开始

在本练习中，我们希望将所有缩略图移动到行中，例如表格单元格。我们将要使用的方法允许任意数量的图像彼此相邻，具体取决于包含框的宽度。

从6个图像和标题开始，每个图像和标题都在自己的div中。这些div都被赋予了一个名为“thumbnail”的类。

第2步 - 浮动div

将“float：left”应用于.thumbnail规则。这将强制每个div到包含框的左边缘或直到它到达另一个div的边缘。浮动元素时也需要宽度 - 除非它是图像。

.thumbnail { float: left; width: 60px; }

第3步 - 添加边框

为了更容易看到发生了什么，使用“border：1px solid＃666;”为div添加边框。Netscape 4不喜欢这个规则，所以它应该使用“ @import ” 隐藏在浏览器中。

border: 1px solid #999;

第4步 - 添加保证金

可以添加边距以将div推离彼此。

如果Netscape 4是目标浏览器，则应使用简写规则（例如“margin-left：20px;”和“margin-bottom：20px;”），因为此浏览器严重误解了与边距相关的速记规则。

如果符合标准的浏览器是目标，并且边界规则对Netscape 4隐藏（使用“ @import ”），则可以使用单个速记规则 - “margin：0 15px 15px 0;”。

请记住，速记值按顺时针顺序应用; 顶部，右侧，底部，左侧。

margin: 0 15px 15px 0;

第5步 - 强制换行

如果您使用的是液体布局（内容区域将由用户浏览器窗口大小的宽度决定），您可能希望根据需要让缩略图流向新行。但是，如果您使用的是包含设置宽度的框，则可能希望强制换行并在每一行上设置一定数量的缩略图。

有几种方法可以实现这一目标。在本练习中，我们将使用BR为“clear：both”的BR。

.clearboth { clear: both; } <br class="clearboth">

第6步 - 添加填充

此时，您可能希望删除div周围的边框。如果要保留边框，则必须添加一些填充，以使其远离图像。

padding: 5px;

完了！

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		.thumbnail {
			float:left;
			width:60px;
			border:1px solid red;
			margin:0 15px 15px 0;
			padding:5px;
		}
		.clearboth {
			clear:both;
		}
	</style>
</head>
<body>
	<div class="thumbnail">
		<img src="images/healthy.jpg" alt="" width="60" height="60" /><br />
		标题
	</div>
	<div class="thumbnail">
		<img src="images/healthy.jpg" alt="" width="60" height="60" /><br />
		标题
	</div>
	<div class="thumbnail">
		<img src="images/healthy.jpg" alt="" width="60" height="60" /><br />
		标题
	</div>
	<br class="clearboth">
	<div class="thumbnail">
		<img src="images/healthy.jpg" alt="" width="60" height="60" /><br />
		标题
	</div>
	<div class="thumbnail">
		<img src="images/healthy.jpg" alt="" width="60" height="60" /><br />
		标题
	</div>
	<div class="thumbnail">
		<img src="images/healthy.jpg" alt="" width="60" height="60" /><br />
		标题
	</div>
</body>
</html>

效果图如下：