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

arsncao 六月 12, 2023

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




本文索引


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



标题0

标题1

标题2

标题3

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

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>


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



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


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



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


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



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


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



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


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



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


油管频道👉 https://bit.ly/2XNfakc 看最新视频，白嫖最新节点！

请朋友们优先使用订阅，特别是手机用户，更方便更快捷！




发表评论

0 评论

发表评论