站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
▼
建站程序
开发
服务器
办公软件
开发教程
▼
服务器教程
软件使用教程
运营教程
热门电子书
▼
CSS教程
WordPress教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
热点词条
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
WordPress:Wrapping Text Around Images
”(章节)
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
=== 左边的,右边的和中间的图像 === 当一个图像处在你的文本的边缘的时候,它使得文本和图像之间留有了空格,这样文字就不会顶对着边缘。因为有的浏览器处理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><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><p>这些文字在叶子图像的上面,如果你要写关于叶子的内容,你可能在你的文章中写到了。<img src="/images/leaf.gif" class="centered" alt="Red leaf" title="Red Leaf" />这是文本图像下面的一些文字,你可以继续写文本中的那个叶子的有关内容。</p></tt></div> <div style="width:50%; border:1px blue solid; font-size:105%; padding:10px; margin: 20px">这些文字在叶子图像的上面,如果你要写关于叶子的内容,你可能在你的文章中写到了这个。[[WordPress:Image:leaf.gif|中心]] 这是文本图像下面的一些文字,你可以继续写文本中的那个叶子的有关内容。</div>
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)