11Blogger网页架构设计之Float-- 多图像和其对应标题的摆放技巧（七）

本文详细研究多个图像和他们对应标题一起浮动的控制效果，我们让多个图像及其标题排成一行，一直到他的容器的宽度，并展示内边距和外边距的效果区别，体会clear的换行效果！

本文索引

第 1 步 - 没有 CSS 格式的多个图像及其标题摆放的样式
第 2 步 - 多个图像都向左浮动是这个效果
第 3 步 - 给每个 DIV 分别添加边框
第 4 步 - 给每个 DIV 分别添加外边距
第 5 步 - 强制换行排成两行
第 6 步 - 给每个 DIV 分别添加内边距

None

第 1 步 - 没有 CSS 格式的多个图像及其标题摆放的样式

标题0

标题1

标题2

标题3

None

在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。我们还可以要图像推开文本内容。最后，我们从一段文本中的图像开始。

CSS CODE
None

HTML CODE
<div>
<img class="floatright" src="images/1.jpg" alt="" width="100" height="100"/>
标题0
</div>
<div>
<img class="floatright" src="images/2.jpg" alt="" width="100" height="100"/>
标题1
</div>
<div>
<img class="floatright" src="images/3.jpg" alt="" width="100" height="100"/>
标题2
</div>
<div>
<img class="floatright" src="images/4.jpg" alt="" width="100" height="100"/>
标题3
</div>
<p>
在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。...
</p>
None

第 2 步 - 多个图像都向左浮动是这个效果

None

标题0

标题1

标题2

标题3

CSS CODE
.floatleft {
float: left;
width: 100px;
}

HTML CODE
<div>
<img class="floatleft" src="images/1.jpg" alt="" width="100" height="100"/>
标题0
</div>
<div>
<img class="floatleft" src="images/2.jpg" alt="" width="100" height="100"/>
标题1
</div>
<div>
<img class="floatleft" src="images/3.jpg" alt="" width="100" height="100"/>
标题2
</div>
<div>
<img class="floatleft" src="images/4.jpg" alt="" width="100" height="100"/>
标题3
</div>
<p>
在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。...
</p>
None

第 3 步 - 给每个 DIV 分别添加边框

None

标题0

标题1

标题2

标题3

CSS CODE
.floatleft {
float: left;
width: 100px;
border: 1px solid #999;
}

HTML CODE
<div>
<img class="floatleft" src="images/1.jpg" alt="" width="100" height="100"/>
标题0
</div>
<div>
<img class="floatleft" src="images/2.jpg" alt="" width="100" height="100"/>
标题1
</div>
<div>
<img class="floatleft" src="images/3.jpg" alt="" width="100" height="100"/>
标题2
</div>
<div>
<img class="floatleft" src="images/4.jpg" alt="" width="100" height="100"/>
标题3
</div>
<p>
在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。...
</p>
None

第 4 步 - 给每个 DIV 分别添加外边距

None

标题0

标题1

标题2

标题3

CSS CODE
.floatleft {
float: left;
width: 100px;
border: 1px solid #999;
margin: 0 15px 15px 0;
}

HTML CODE
<div>
<img class="floatleft" src="images/1.jpg" alt="" width="100" height="100"/>
标题0
</div>
<div>
<img class="floatleft" src="images/2.jpg" alt="" width="100" height="100"/>
标题1
</div>
<div>
<img class="floatleft" src="images/3.jpg" alt="" width="100" height="100"/>
标题2
</div>
<div>
<img class="floatleft" src="images/4.jpg" alt="" width="100" height="100"/>
标题3
</div>
<p>
在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。...
</p>
None

第 5 步 - 强制换行排成两行

None

标题0

标题1

标题2

标题3

CSS CODE
.floatleft {
float: left;
width: 100px;
border: 1px solid #999;
margin: 0 15px 15px 0;
}

.clearboth { clear: both; }

HTML CODE
<div>
<img class="floatleft" src="images/1.jpg" alt="" width="100" height="100"/>
标题0
</div>
<div>
<img class="floatleft" src="images/2.jpg" alt="" width="100" height="100"/>
标题1
</div>
<br class="clearboth">
<div>
<img class="floatleft" src="images/3.jpg" alt="" width="100" height="100"/>
标题2
</div>
<div>
<img class="floatleft" src="images/4.jpg" alt="" width="100" height="100"/>
标题3
</div>
<p>
在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。...
</p>
None

第 6 步 - 给每个 DIV 分别添加内边距

None

标题0

标题1

标题2

标题3

CSS CODE
.floatleft {
float: left;
width: 100px;
border: 1px solid #999;
margin: 0 15px 15px 0;
padding: 5px;
}

.clearboth { clear: both; }

HTML CODE
<div>
<img class="floatleft" src="images/1.jpg" alt="" width="100" height="100"/>
标题0
</div>
<div>
<img class="floatleft" src="images/2.jpg" alt="" width="100" height="100"/>
标题1
</div>
<br class="clearboth">
<div>
<img class="floatleft" src="images/3.jpg" alt="" width="100" height="100"/>
标题2
</div>
<div>
<img class="floatleft" src="images/4.jpg" alt="" width="100" height="100"/>
标题3
</div>
<p>
在本示例中，我们希望强制将图像向右浮动并允许文本内容和它一起流动。...
</p>

🟢 读者资源专享

这里是我从网络上收集并整理的一些免费节点资源。如果你需要，可以通过下面的链接下载或订阅使用。

📥 V2ray / Karing / Shadowrocket

下载节点文件预览节点

📥 Clash Verge

下载节点文件预览节点

📥 For Shadowrocket

下载节点文件预览节点