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"，图像会移到右边，左边，或者中间，而且文章会包在图像的周围。就这么简单。
可供选择的文本大小[ ]
有些浏览器可能允许你控制由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">
在以上的例子中，我们只是将right级添加到container中，container会将它作为一个浮点放到右边上，允许文本在它的周围浮动。使用left分类，会将它浮在左边，centered文本效果，是文本和图像都处在中间。
清除显示[ ]
如果图像比可能出现在它周围的文字面积大，是图像悬挂着，就像一面旗帜，下面有些东西，这样在文本中的某点，你就想要清除这个显示。注意在这个分割的内部没有文字。
<div style="clear:both;"></div>
资源[ ]
This article is [[WordPress::Category:Copyedits|marked]] as in need of editing. You can help Codex by editing it.