WordPress:Wrapping Text Around Images

右边的有时，你想让一个图像覆盖你的屏幕，或者在文章的中间，上下都要文本，但是大多数时候，你都想图像在文本的一边或者另一边，并且使文本围绕着图像或者在图像上浮动。让我们来看看怎样实现这一点:

首先，现在看一眼你的文章中的一个典型的图像标签，没有关于在图像周围添加文字的指示说明。注意我们给标签添加了title 和 alt属性；alt对于访问权限很重要；标题是图像的tooltip。

<img src="/images/leaf.jpg" 
 alt="leaf graphic" 
 title="leaf graphic">

给出图像形式

要开始将你的图像设置为文字包围形式的，你可能要对控制你的WordPress站点的样式表做一些更改。CSS提供了关于创建和编辑层叠式样式表资源的大量列表。

从你的WordPress 主题文件夹中， 在一个文本编辑器中打开style.css文件。非常重要！在你做任何编辑之前，在某个位置保存一个文件备份。现在，搜索一下img。你所有的图像选择符有希望会被集中到一起。如果没有集中的话，找到所有的图像选择符，剪贴并且将它们粘贴到一组上，使这个过程变得更加地简单。

边框

你要决定一下是否在图像周围加一个边框，如果加的话，边框的大小，颜色，和形式是怎样的。如果没有边框，你可以使用以下的：

img {border:0}

For 1 pixel solid red line border, add: 对于一像素的实体红线边框，添加： img {border:solid red 1px}

如果你在图像周围创建一个链接，有的浏览器会在图像周围设置一个边框，让访客知道图像是一个链接。如果你不想要一个边框，使用下面的：

a img {border:0}

你仍然可以在图像的周围加一个hover，这样当访客将鼠标移到图像上的时候，鼠标指针会变成一个手的形状，而且图像会得到一个彩色的边框。 a:hover img { border:solid red 1px; }

Padding 和图像宽度

让我们再清除一个东西，使得你的内容上的图像与我们将使用的其它样式配合得更好。

我们向清除图像周围所有的padding,确保图像的所有宽度而不是仅有的一部分都显示了。如果它不在你的样式表上，添加以下的内容：

p img { padding: 0; max-width: 100%; }

左边的，右边的和中间的图像

当一个图像处在你的文本的边缘的时候，它使得文本和图像之间留有了空格，这样文字就不会顶对着边缘。因为有的浏览器处理margins和paddings时，方法是不同的，下面的样式会适应大多数浏览器的"空间需求"这样图像不会与图像内的任何文字或者列表交叠。

img.right { padding: 4px; margin: 0 0 2px 7px; display: inline; }
img.left { padding: 4px; margin: 0 7px 2px 0; display: inline; }

display:inline声明使得图像在你放置图像的文本内部。

现在要将float声明添加到图像上了。但是，等一下。为什么我们要将我们的左右浮点只消耗在图像上？为什么不将它们使用在任何页面左边或者右边的内容上，并且使文本在它的左右浮动？你知道，你可以这样做。但这是属于另一个指南上的内容。我们决定消耗这个，因此如果它还不在你的样式表上，添加以下的：

.right { float: right; }
.left { float: left; }

注: 默认的/Kubrick主题使用这种方法，但是命名类别alignleft和 alignright。使用left and right 似乎更容易记住和使用，但是任何名称都可以用来运行这个。

那么将图像放到中间是怎样的呢？对，你仍然可以那样做。center标签不再有效了，因此你可以为中间的内容创建一个形式：

img.centered { display: block; margin-left: auto; margin-right: auto; }

左边的，右边的，和中间的例子

这听起来是一些复杂的东西，但是这个一旦完成了，你就永远都不用再和这些东西搅混在一起来。我们希望是这样的。使用这个，给你的图像创建一个链接，并且添加class="right", class="left",或者 class="centered"，图像会移到右边，左边，或者中间，而且文章会包在图像的周围。就这么简单。

<img src="/images/leaf.gif" class="right" alt="Red leaf" title="Red Leaf" />这些文字在图像的周围，描述图像上的叶子，图像在你的文本的右边。就是，如果你首先写关于叶子的内容，你想要写关于这个特别的叶子的内容。

右边的 这些文字在图像的周围，描述图像上的叶子，图像在你的文本的右边。就是，如果你首先写关于叶子的内容，你想要写关于这个特别的叶子的内容。

<p>这些文字在叶子图像的上面，如果你要写关于叶子的内容，你可能在你的文章中写到了。<img src="/images/leaf.gif" class="centered" alt="Red leaf" title="Red Leaf" />这是文本图像下面的一些文字，你可以继续写文本中的那个叶子的有关内容。</p>

这些文字在叶子图像的上面，如果你要写关于叶子的内容，你可能在你的文章中写到了这个。中心 这是文本图像下面的一些文字，你可以继续写文本中的那个叶子的有关内容。

可供选择的文本大小

有些浏览器可能允许你控制由ALT标签创建的文本的大小。当你将鼠标放在一个图像上或者当图像不能载入的时候，这个文本就会出现。你可以将文本设置为任何大小，但是比你的文章内容的字体大小更小些，会是一个好主意。

img {font-size:60%}

给图像加上说明

图像倾向于保持在原处，看起来很漂亮。alt和title属性显示了一些图像看起来是怎样的的信息，但是除了这个以外，除非你给图像周围添加了一些文字，否则图像仅仅地保持在原位。因此创建一个字幕形式，添加一些"趣味性。"

.caption { margin: 5px; padding: 5px; border: solid 1px #E5E5FF; background: #E5F2FF; font-size:90%; color: black }

在以上的例子中，我们添加了一个边框和一点背景色，但是你可以将它设计成任何的你想要设计的形式。我们建议你，至少将文本的设置为不同的大小，并且给全部的容器加一个padding,这样可以将图像和文章内容的其它部分，区分开来。

<div class="caption right">
<img src="/images/leaf.jpg" alt="leaf graphic" title="leaf graphic">

Red Leaf

frame|right|红色 叶子这是包围在叶子图像周围的文字，叶子图像有一个说明。如果你在文章中写关于叶子的内容，你可能想在叶子图片的下面有一个说明。说明在文本的下面，同时也帮助了用户了解图片是关于什么的。

在以上的例子中，我们只是将right级添加到container中，container会将它作为一个浮点放到右边上，允许文本在它的周围浮动。使用left分类，会将它浮在左边，centered文本效果，是文本和图像都处在中间。

清除显示

如果图像比可能出现在它周围的文字面积大，是图像悬挂着，就像一面旗帜，下面有些东西，这样在文本中的某点，你就想要清除这个显示。注意在这个分割的内部没有文字。

<div style="clear:both;"></div>

资源

• 使用图像
• WordPress 主题
• CSS

This article is [[WordPress::Category:Copyedits|marked]] as in need of editing. You can help Codex by editing it.