本站网址:www.xawxcz.net 简体繁体

响应式网页文章缩进,图片跟着缩进无法居中,解决思路

初次做响应式网页,觉得效果不错,但是碰到一个难题。我的网页纠结的代码如下(可供参考):

这是模板原始代码,一个是CSS控制文章段落,一个是控制文章内容图片。

.post .entry p {font-size:1em; line-height:1.75em; margin-bottom:20px;}

.post .entry img {max-width:100%;hight:auto;}

现在我要把文章开头缩进,添加text-indent:2em; 就变成:

.post .entry p {text-indent:2em;font-size:1em; line-height:1.75em; margin-bottom:20px;}

一切似乎妥当,PC端网页版效果不错。但是,打开移动端后,却见文章内容图片也跟着缩进,并且右边像被剪切了一个长条(缩进部分)。就是说,内容图片显示不完整。这该怎么办呢?

百度一下,有人说,只要在图片那儿添加display:block;就行,因为text-indent:2em;代码对display:block;无效。于是,我就把图片代码变成:

.post .entry img {display:block;max-width:100%;hight:auto;}

似乎解决了,移动端图片显示完整,也不跟着段落缩进了。可是再看PC端网页,因着图片不缩进,就顶着左边距,排版很难看。我就想,把图片居中不就行了。于是又在图片那儿添加text-align:center;结果变成:

.post .entry img {display:block;max-width:100%;hight:auto;text-align:center;}

但是刷新PC端网页后,却发现不起作用,就是说text-align:center;对display:block;过敏。那么,如果从文章编辑器直接对图片设置居中呢?照做,却发现仍不起作用。

有人说,把display:block;换成display:inline-block;就行了。照做,结果发现移动端图片又跟着文章段落缩进了,图片无法完整显示。

真的太难了!怎么办?

经过多次摸索,最后我得出代码是这样的:

.post .entry p {text-indent:2em;font-size:1em; line-height:1.75em; margin-bottom:20px;}

.post .entry img {display:block;max-width:100%;hight:auto;margin:0 auto;}

对!在图片那儿再添加margin:0 auto;就完美解决。现在我的网页效果是:

PC端网页:文章缩进,图片居中;

移动端网页:文章缩进,图片完整显示,不缩进。

本文链接:http://xawxcz.net/post/12.html
「未经授权禁止转载」
学习 • 写作