论坛帖子图文混排的实现方法简介
本帖最后由 马黑黑 于 2021-12-16 12:47 编辑论坛帖子图文混排的实现方法简介 | 马黑黑
图文混排实际上指的是文本流环绕图片的图文编排效果。在HTML中，默认情况下元素通常会完整占据一行，如此，文字与图片各自占领相邻的行，不存在环绕效果。当我们希望以文本环绕图片的方式展现我们的文档，我们至少有两种实现方式可选：
一、最简单的纯 HTML 方法
此法通过HTML的 img 标签的 align 属性实现图文混排。img 标签用于加载图片，常用的属性有：
src 指定图片地址
height 定义图片高度
width 定义图片宽度
title 鼠标指针悬停于图片时显示的文本
alt 图片打不开时的占位/提示文本
align 对齐方式
上面的属性，除 src 外均可省略。其中的 align 属性是我们要重点讨论的，它指定图片的对齐方式，有两个值可以实现图文混排：left 和 right。
当 align 的值设定为 left，图片以居左的位置出现，其下的文本则环绕在图片的右边呈现，形成的总体效果是上-右-下半包围环绕；值设定为 right 的话，图片居右呈现，等高文本流在图片的左边，形成的总体效果是上-左-下半包围环绕。以下是代码样式：
<p>文本流一</p>
<img src="图片地址" align="left" />
<p>文本流二</p>
【提示】
① 文本流即字数要足够多才能出现环绕效果
② 图片居中显示时不会产生环绕效果
③ img 标签下面的文本才参与环绕（方法二亦如此）
二、拥有更多操控的 CSS 方法
上述纯 HTML 方法简单实用，但可操作的内容不够丰富和具体，用 CSS 层叠样式表则可弥补这些缺陷。在开放HTML代码的论坛里，我们仍然使用 style 属性嵌入 CSS 相关层叠样式。直接举例说明：
<img src="图片地址" style="float:right;" />
这里，我们用到了图片对象的 float 属性，float 是“漂浮”、“浮动”之意，这里表示对象以何种方式呈现，值有 right（居右）和 left（居左）等，居左或居右时，与之等高的文本流则浮动到右边或左边，再辅以上下均有文本的话就能形成半包围结构的环绕效果。
如果我们希望图片与文本之间存在一个合理的距离，这时可以给 style 加入一个边缘设定，即 margin 属性，此单词的原始含义就是“边缘”。我们可以一次性设定上、右、下、左的边缘值（单位为像素即px）：
<img src="图片地址" style="float:right;margin:10px 0px 10px 10px;" />
上、右、下、左，自上而下，顺时针走，这是定义对象边缘值的规定。如果只想设定某个方向的边缘值，也可这样做：
style="float:right;margin-left:10px;"
margin-left 是左边边缘值，右边是 margin-right，顶边是 margin-top，底边是 margin-bottom。
若希望所有方向的边缘值一个样，则可：style="float:right;margin:10px;"
【小结】
通过 style 属性设定 img 对象的层叠样式，利用——
① float 对象浮动属性将对象与等高文本流左右隔开；
② margin 对象边缘属性将对象与文本拉开一定距离
——从而达成理想的图文混排文档效果。
其他复杂的图文混排实现机制不属本帖的讨论范畴，我们也不主张文档的呈现方式过于复杂，美观实用即可。
向马老师学习来了。！很详细的讲解！谢谢！{:4_199:} {:4_178:} 黑黑的讲解很清楚。
纯 HTML 方法是用对齐命令align来实现的，CSS 方法要用到style 属性设置float浮动方式，而且还能做边界设置。
这种都只适合左或者右的放置，对居中无效。学习了{:4_187:} 边缘的4个数值代表上、右、下、左，顺时针的。嗯嗯，知道了，以前看到4个数字完全不知道是什么{:4_173:}
如果想设定特定方向的值，可以加上-top -right等等进行规定。
如果什么都不加，只有1个数值时，代表四个方向的边缘都一样大。
要是有2个数值，代表哪两个方向？我记得我看到过2个数值的。 继续学习 加林森 发表于 2021-12-16 19:09
继续学习
队长何须学习 红影 发表于 2021-12-16 16:51
黑黑的讲解很清楚。
纯 HTML 方法是用对齐命令align来实现的，CSS 方法要用到style 属性设置float浮动方式 ...
嗯，与Word文档的图文混排相比，网页能实现的少一些了 马黑黑 发表于 2021-12-16 19:18
队长何须学习
怎么了啊？我也喜欢学习啊。 红影 发表于 2021-12-16 16:56
边缘的4个数值代表上、右、下、左，顺时针的。嗯嗯，知道了，以前看到4个数字完全不知道是什么
...
关于两个数值的表达规定：第一个代表上下，第二个代表左右。 加林森 发表于 2021-12-16 19:31
怎么了啊？我也喜欢学习啊。
队长发号施令就行了，就像将军不用去拼刺刀一样 马黑黑 发表于 2021-12-16 19:42
队长发号施令就行了，就像将军不用去拼刺刀一样
什么乱七八糟的。{:4_170:} 加林森 发表于 2021-12-16 20:20
什么乱七八糟的。
正常逻辑 马黑黑 发表于 2021-12-16 21:01
正常逻辑
我得学习学习再学习！ 加林森 发表于 2021-12-16 21:05
我得学习学习再学习！
叫秘书代办就可以了 马黑黑 发表于 2021-12-16 21:05
叫秘书代办就可以了
这个不行，必须自己学习。 这个真是技术贴{:4_199:} 小辣椒 发表于 2021-12-16 22:03
这个真是技术贴
小辣椒晚上好 加林森 发表于 2021-12-16 21:15
这个不行，必须自己学习。
队长精神可嘉 马黑黑 发表于 2021-12-16 22:18
队长精神可嘉
不懂的就得学习啊