9Blogger网页架构设计之Float-- 图像和标题一块浮动（五）

今天我们来手把手逐步实现 float 的图像和标题一起浮动，这个操作的核心是要把图像和标题当成一个整体，在这里就把他们放在一个DIV里就可以了，对这个div进行操作即可，我们立即进行实操！

本文索引

第 1 步 - 没有 CSS 格式的图像、标题和文本段落是这样摆放的
第 2 步 - 把图像和标题放入div标签中
第 3 步 - 浮动DIV到右边，并给DIV宽度
第 4 步 - 给 DIV 添加外边距
第 5 步 - 给 DIV 添加背景色
第 6 步 - 给 DIV 添加内边距，会扩展背景色
第 7 步 - 给 DIV 添加边框
第 8 步 - 给图像添加边框
第 9 步 - 去掉段落的上边距
第 10 步 - 给边框不同颜色和粗细线条

None

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

None

这儿是标题

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

CSS CODE
None

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

None

第 2 步 - 把图像和标题放入div标签中

这儿是标题

CSS CODE
None

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

None

第 3 步 - 浮动DIV到右边，并给DIV宽度

None

这儿是标题

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

CSS CODE
.floatright {
float: right;
width: 100px;
}

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

None

第 4 步 - 给 DIV 添加外边距

None

这儿是标题

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

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

None

第 5 步 - 给 DIV 添加背景色

None

这儿是标题

CSS CODE
.floatright {
float: right;
width: 100px;
margin: 0 0 10px 30px;
background-color: #ddd;
}

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

None

第 6 步 - 给 DIV 添加内边距，会扩展背景色

None

这儿是标题

CSS CODE
.floatright {
float: right;
width: 100px;
margin: 0 0 10px 30px;
background-color: #ddd;
padding: 10px;
}

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

None

第 7 步 - 给 DIV 添加边框

None

这儿是标题

CSS CODE
.floatright {
float: right;
width: 100px;
margin: 0 0 10px 30px;
background-color: #ddd;
padding: 10px;
border: 1px solid #666;
}

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

None

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

None

这儿是标题

CSS CODE
.floatright {
float: right;
width: 102px;
margin: 0 0 10px 30px;
background-color: #ddd;
padding: 10px;
border: 1px solid #666;
}
div.floatright img { border: 1px solid red; }

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

None

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

None

这儿是标题

CSS CODE
.floatright {
float: right;
width: 102px;
margin: 0 0 10px 30px;
background-color: #ddd;
padding: 10px;
border: 1px solid #666;
}
div.floatright img { border: 1px solid red; }
.p9 { margin-top: 0; }

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

None

第 10 步 - 给边框不同颜色和粗细线条

None

这儿是标题

CSS CODE
.floatright {
float: right;
width: 102px;
margin: 0 0 10px 30px;
background-color: #ddd;
padding: 10px;
border-top: 1px solid #999;
border-right: 2px solid #555;
border-bottom: 2px solid #555;
border-left: 1px solid #999;
}
div.floatright img {
border-top: 2px solid red;
border-right: 1px solid yellow;
border-bottom: 1px solid blue;
border-left: 2px solid #555;
}
.p10 { margin-top: 0; }

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

None

None None

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

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

👉Clash-meta 20.37版以后/Shadowrocket订阅：

https://drive.google.com/uc?export=download&id=1xcSKbPjXnuaZAg0gakhBUwSxn7Wc5AHZ
👉Clash-旧版 20.37版以前/Shadowrocket订阅：

https://drive.google.com/uc?export=download&id=1xaDFe-VUsPR26jET_K0YzP1QqUMw0Tos
👉V2ray/IOS苹果V2Box/WinXray/Quantumult X订阅：

https://drive.google.com/uc?export=download&id=1xZtlYymTJFPNXZyzX3MfNoGq0NqoSOx0
👉Clash-meta(点击下载后，本地导入)
👉 Clash-旧版(点击下载后，本地打开)
👉 IOS 苹果小火箭专用(点击自动下载，订阅地址请右键复制链接地址)
👉 V2ray/IOS苹果V2Box/winXray(点击下载后，本地打开)