编辑“WordPress:Wrapping Text Around Images”

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

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

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

== 给出图像形式 ==

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

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

=== 边框 ===

你要决定一下是否在图像周围加一个边框，如果加的话，边框的大小，颜色，和形式是怎样的。如果没有边框，你可以使用以下的：
 img {border:0}
<div style="float:right;border:1px red solid; background:white; width:50px; height:70px;text-align:center">
[[WordPress:Image:leaf.gif|图像:leaf.gif]]
</div>
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时，方法是不同的，下面的样式会适应大多数浏览器的"空间需求"这样图像不会与图像内的任何文字或者列表交叠。
<pre>img.right { padding: 4px; margin: 0 0 2px 7px; display: inline; }
img.left { padding: 4px; margin: 0 7px 2px 0; display: inline; }</pre>

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

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

<pre>.right { float: right; }
.left { float: left; }</pre>

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

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

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

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

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

<div style="margin:20px"><tt>&lt;img src="/images/leaf.gif" class="right" alt="Red leaf" title="Red Leaf" />这些文字在图像的周围，描述图像上的叶子，图像在你的文本的右边。就是，如果你首先写关于叶子的内容，你想要写关于这个特别的叶子的内容。</tt></div>
<div style="width:50%; border:1px blue solid; font-size:105%; padding:20px; margin: 20px">[[WordPress:Image:leaf.gif|右边的]] 这些文字在图像的周围，描述图像上的叶子，图像在你的文本的右边。就是，如果你首先写关于叶子的内容，你想要写关于这个特别的叶子的内容。</div>

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

<div style="width:50%; border:1px blue solid; font-size:105%; padding:10px; margin: 20px">这些文字在叶子图像的上面，如果你要写关于叶子的内容，你可能在你的文章中写到了这个。[[WordPress:Image:leaf.gif|中心]] 这是文本图像下面的一些文字，你可以继续写文本中的那个叶子的有关内容。</div>

=== 可供选择的文本大小 ===
有些浏览器可能允许你控制由<tt>ALT</tt>标签创建的文本的大小。当你将鼠标放在一个图像上或者当图像不能载入的时候，这个文本就会出现。你可以将文本设置为任何大小，但是比你的文章内容的字体大小更小些，会是一个好主意。
 
img {font-size:60%}
== 给图像加上说明 ==
图像倾向于保持在原处，看起来很漂亮。<tt>alt</tt>和<tt>title</tt>属性显示了一些图像看起来是怎样的的信息，但是除了这个以外，除非你给图像周围添加了一些文字，否则图像仅仅地保持在原位。因此创建一个字幕形式，添加一些"趣味性。"

<div style="padding: 1em; border: 1px dashed #2f6fab; 
color: Black; background-color: #f9f9f9; line-height: 1.1em">
<tt>.caption { margin: 5px; padding: 5px; border: solid 1px #E5E5FF; background: #E5F2FF; font-size:90%; color: black }</tt>
</div>

在以上的例子中，我们添加了一个边框和一点背景色，但是你可以将它设计成任何的你想要设计的形式。我们建议你，至少将文本的设置为不同的大小，并且给全部的容器加一个padding,这样可以将图像和文章内容的其它部分，区分开来。
<div style="padding: 1em; border: 1px dashed #2f6fab; 
color: Black; background-color: #f9f9f9; line-height: 1.1em">
<tt>
&lt;div class="caption right"&gt;<br />
<img src="/images/leaf.jpg" alt="leaf graphic" title="leaf graphic">
<br />
Red Leaf</div>
</tt>
</div>

<div style="border:1px blue solid; width:40%; font-size:105%; padding:20px; margin: 20px">[[WordPress:Image:leaf.gif|frame|right|红色 叶子]]这是包围在叶子图像周围的文字，叶子图像有一个说明。如果你在文章中写关于叶子的内容，你可能想在叶子图片的下面有一个说明。说明在文本的下面，同时也帮助了用户了解图片是关于什么的。

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

==清除显示 ==

如果图像比可能出现在它周围的文字面积大，是图像悬挂着，就像一面旗帜，下面有些东西，这样在文本中的某点，你就想要清除这个显示。注意在这个分割的内部没有文字。
<div style="padding: 1em; border: 1px dashed #2f6fab; 
color: Black; background-color: #f9f9f9; line-height: 1.1em">
&lt;div style="clear:both;"&gt;&lt;/div&gt;
</div>

== 资源 ==

* [[WordPress:Using Images|使用图像]]
* [[WordPress:Using Themes|WordPress 主题]]
* [[WordPress:CSS|CSS]]



{{Copyedit}}