10Blogger网页架构设计之Float-- 多图像浮动的操作技巧（六）

sfzy1 六月 12, 2023

本文详细研究多个图像一起浮动的控制效果，主要展示向右浮动，竖向对齐的操作，其实就是clear的作用，下面直入主题！




本文索引
None

第 1 步 - 没有 CSS 格式的多个图像是这样摆放的


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

CSS CODE
None

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

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


None

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

CSS CODE
.floatright {
float: right;
}

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

第 3 步 - 给每个图像分别添加外边距


None

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

CSS CODE
.floatright {
float: right;
margin: 0 0 10px 10px;
}

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

第 4 步 - 让每个图像竖向排列


None

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

CSS CODE
.floatright {
float: right;
margin: 0 0 10px 10px;
clear: right;
}

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

第 5 步 - 去掉段落的上边距


None

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

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

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

CSS CODE
.floatright {
float: right;
margin: 0 0 10px 10px;
clear: right;
}
p { margin-top: 0; }

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


None None

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

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




发表评论

0 评论

发表评论