8Blogger网页架构设计之Float-- 将图像浮动到右侧 （四）

arsncao 六月 11, 2023

本篇文章开始，我们逐步来实现 float 的功能，这次我们来将图像向右浮动，看他是一个什么效果，同时还可以做一些什么操作。




本文索引
None

第 1 步 - 没有 CSS 格式的图像和一段文本是这样摆放的


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

CSS CODE
None

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

None

第 2 步 - 在 CSS 中右浮动图像后是这样摆放的


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

CSS CODE
.floatright { float: right; }

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

第 3 步 - 给图像添加外边距


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

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

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

None

第 4 步 - 给图像添加红边框


None

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

CSS CODE
.floatright { float: right;
margin: 0 0 10px 30px;
border: 1px solid red;
}

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

None

第 5 步 - 给图像添加内边距


None

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

CSS CODE
.floatright { float: right;
margin: 0 0 10px 30px;
border: 1px solid red;
padding: 20px;
}

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

None

None None

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

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




发表评论

0 评论

发表评论