您现在的位置是:首页 > cms教程 > WordPress教程WordPress教程

wordpress文章图片并排的方法

靖柏2023-06-18WordPress教程已有人查阅

导读需要用到一款带有“审查元素”功能的浏览器,我用的是360;需要Notepad编辑器或者Dreamweaver,不建议用记事本,会容易出现新问题。

准备工作

需要用到一款带有“审查元素”功能的浏览器,我用的是360;

需要Notepad编辑器或者Dreamweaver,不建议用记事本,会容易出现新问题。

说明问题

我们进入wordpress后台,找到”写文章“,在其中依次插入非常小的两张图片,会看到如图所示,图片自动换行了,然后把文章发布一下,可以看到两张图片是两行显示。

发现原因

直说吧,关于排版问题,我们可以默认是CSS的问题,我开始也是想的可能是主题的问题,于是切换到默认主题,但发现官方三款主题,只有【Twenty Seventeen】这款主题在编写时是不默认换行的。

以我遇到的一个实例,我们看一下区别,首先后台是显示很正常的,发布后当前主题与Twenty Seventeen主题效果不同。

找到CSS,并开始修改

我们打开有问题的页面,找到其中一张图片,点击鼠标右键,选择【审查元素】

在下面编辑区域修改CSS

通过这里的修改,我们可以直接看到上面页面效果,是非常便利开发人员和站长朋友们的,在这里我找到display这个属性,影响了换行,当勾掉对勾时,图片实现了换行。在这里为大家分享一下,该属性block键值会自动生成换行符,于是图片便默认换行了。

这一步找到要修改的CSS文件

当我们把鼠标放在图示右上角位置时,会产生一个链接地址的提示,它就是放置该属性的CSS文件位置,也是我们需要修改的地方。

找到该文件,用notepad打开,然后再通过查找(查找的内容可以是我们直接想删掉的词,但切记 要和我们之前在审查元素看到的内容 基本对上,否则肯定就找错了地方),删除掉不要东西。

清除浏览器缓存,刷新看效果

这一步其实很简单,但很重要,每次看文件效果之前务必要进行该操作,除非你确定已经清除过缓存了。因为如果缓存在的话,无论你怎么改,都不会看到效果,只有一脸的懵逼。如图操作:

修改编辑器相关的CSS文件

我们发现做了上述修改后,写文章时编辑器里还是对图片进行了换行处理,这时用的方法跟上面的类似,也是右键图片,选择”审查元素“,找到要修改的文件,对其进行修改。

再到前面修改由于编辑器造成的CSS效果

当我们后台满意后,发布完成后,发现文章中的小图片又换行了,郁闷了!其实,只是工作还没做完,继续!方法同上,找到图片,右键,审查元素,修改文件,清理缓存,刷新页面。至此,无论你前后台怎么发布图片,发现wordpress写文章会像写word文档那样听话了。

本文标签:

很赞哦! ()

相关源码

  • (PC+WAP)餐饮奶茶美食小吃招商加盟pbootcms模板源码下载为茶饮烘焙、小吃快餐等餐饮品牌打造的招商加盟系统,助力品牌快速拓展市场;双端pc+wap设计呈现加盟政策对比表。支持后台实时更新菜品图片、加盟费用等关键信息。查看源码
  • pbootcms模板(PC+WAP)APP应用软件下载类官网源码为APP应用软件官网打造的响应式解决方案,PC端与移动端(WAP)数据实时同步,一次更新全网生效,满足多终端用户无缝体验需求。查看源码
  • (自适应)工业机械制造设备网站pbootcms模板下载为机械制造、工业设备类企业设计,特别适合各类机械设备、生产线、工业自动化产品展示。采用响应式技术,确保在不同设备上都能清晰展示机械产品的技术参数和细节特点。查看源码
  • 帝国CMS7.5二次元COS漫展网站模板源码免费下载本模板基于帝国CMS 7.5版本深度开发,为二次元文化分享领域设计。采用UTF-8编码,支持中文内容展示,特别适用于COSPLAY作品展示、漫展信息发布等二次元相关内容的网站建设。模板结构清晰,布局合理,充分考虑了二次元用户群体的浏览习惯和审美需求。查看源码
  • 帝国cms7.5自适应手机端在线课程教育网站源码基于帝国CMS后台管理系统,支持在线修改支付参数、联系方式等配置信息,操作界面直观便捷。专注于在线教育视频领域,提供完整的视频课程展示、付费购买及在线支付解决方案。支持多种支付渠道,满足教育培训机构的运营需求。查看源码
  • (自适应html5)自媒体运营培训教程个人博客pbootcms模板本模板基于PbootCMS系统开发,特别适合自媒体运营培训、知识付费类网站使用。采用响应式设计,能够适配各类终端设备,为内容创作者提供专业的内容展示平台。查看源码
分享笔记 (共有 篇笔记)
验证码: