编辑器中的文本换行与网站视图不匹配

时间:2020-03-10 作者:JACOB FERRO

我想在Wordpress中用文字环绕我的图像。我正在使用最新的更新,我单击图像,将其左对齐或右对齐,它在编辑器中看起来很好。当我预览我的站点时,文本并没有像编辑器中显示的那样完全环绕它。查看照片。我对CSS了解不多,但我尝试过搜索论坛,我插入了这个

img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
在外观定制器下的“附加CSS”中。添加此代码后,没有任何更改。

任何帮助都会很好,我不理解编辑器显示的内容与实际网站之间的区别。enter image description here

enter image description here

1 个回复
SO网友:WebElaine

这是一种常见的情况。许多主题提供了前端样式,但它们在编辑器中没有排队,因此网站前端显示的内容与编辑器中的内容并不完全匹配。块编辑器使编辑器更接近前端视图,但它们可能永远不会完全相同。

“附加CSS”是添加CSS以仅调整前端的正确位置。但是,您选择的特定代码已经过时,这是为经典编辑器准备的。要影响正在使用的块编辑器中的图像,需要使用

.alignright img { }

而不是

img.alignright. 从截图上看,您可能需要调整段落样式,而不仅仅是图像样式。很可能图像没有浮动,在这种情况下,您可以尝试

.alignright img { float:right; }

或者段落已清除,在这种情况下,您可以尝试

p { clear:none; }

但这一切都取决于你的主题是如何构建他们的CSS的。他们可能会使用更具体的样式或不同的布局类型。您可能需要阅读CSS并检查元素,以确定什么样的CSS会使布局看起来像您想要的那样。或者,您可以尝试其他主题,看看是否有一个更接近编辑器的主题。

相关推荐

将‘data-Text’属性添加到TagCloud HTML

我正在尝试添加data-text 属性设置为TagCloud小部件中选定的标记。我想这样做以突出显示选定的标记。到目前为止,我已经成功地向其中添加了一个类,但我需要添加的原因是data-text 是将标记文本复制到data-text 这样我就可以在before 和after 元素。以下是我所拥有的:add_filter( \'wp_generate_tag_cloud_data\', function( $tags_data ) { $body_class = get_body_class