论坛帖子图文混排的实现方法简介

马黑黑 · 发表于 2021-12-16 12:45

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 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 对象边缘属性将对象与文本拉开一定距离

——从而达成理想的图文混排文档效果。

其他复杂的图文混排实现机制不属本帖的讨论范畴，我们也不主张文档的呈现方式过于复杂，美观实用即可。