注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

千年绿叶

黑夜给了我黑色的眼睛,我却用它来寻找光明......

 
 
 

日志

 
 

text-indent和图片缩进的问题  

2015-01-15 10:48:24|  分类: Wordpress |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

对于 WordPress 的正文内容和摘要,有时候我们喜欢给他按照 word 那样来个段落首行缩进,这是从小学开始写作文,语文老师就要求的格式了。

所以,对于从小养成的习惯,有的时候很难放弃。要实现也很简单,给主题正文或者摘要区域的文字内容P标签加一个 CSS text-indent就搞定了,比如:.entry p{text-indent: 2em;}

可加了这个缩进后当遇到正文内容中有独立段落的图片时,图片也会被缩进,这样会很影响排版。而且对于缩进后的图片大小也不好把握,对于自适应主题尤其如此。所以很多人因为搞不定图片这个问题最后放弃了使用段落首行缩进。

其实text-indent有个很奇怪的属性,就是其内部元素遇到float或者display: block后就不继承外部这个缩进的属性了,也就是说,只要给图片加上float或者display: block的 CSS 属性后,图片的缩进会自动失效。

WordPress 默认上传图片、插入图片后会带上 aligncenter、alignleft、alignright 和alignnone 的 class,如果你对 aligncenter、alignleft、alignright 做了对应的 CSS 定义后,图片就不会受到外部P标签属性text-indent的影响,这 3 个 class 属性在默认主题里的 CSS 定义如下:

.alignleft {
	float: left;
}

.alignright {
	float: right;
}

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

对于外链的图片,只要给他加上对应的 class 就可以了,比如:

<img src="pic link" class="aligncenter OR alignright OR alignleft" style="display: block" />
  评论这张
 
阅读(189)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017