个人工具
名字空间
变换
操作

WordPress:Wrapping Text Around Images

来自站长百科
跳转到: 导航, 搜索

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

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

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

目录

给出图像形式

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

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

边框

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

img {border:0}

图像:leaf.gif

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主题使用这种方法,但是命名类别alignleftalignright。使用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%}

给图像加上说明

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

.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</div>

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

在以上的例子中,我们只是将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.

留言