WordPress 图像不一致

Question

我正在为教师开发交互式电子课程计划生成器。在将其发送到我大学的 WordPress 页面之前，我正在测试所有内容都是 JSbin。

我有一堆带有 align="left" 属性的图像。这在 JSbin 中完美运行，但在 WordPress 上它们呈对角线下降。这可以在第三个框中（共 4 个）的实时 RIT 页面中看到。这是 WordPress 中的已知错误还是我在复制代码时做错了什么？

< JSbin link />

< Live RIT page />

给我带来麻烦的代码块：

<p>Select Parts:</p>
<div id="bin3">
<img id="drag1" src="http://i.imgur.com/KliLtQ6.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)">
<img id="drag3" src="http://i.imgur.com/uGvqbbK.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)">
<img id="drag6" src="http://i.imgur.com/7Q6ym4O.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)">
<img id="drag8" src="http://i.imgur.com/dywyFeu.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)">
<img id="drag12" src="http://i.imgur.com/v76St3j.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)">
<img id="drag14" src="http://i.imgur.com/vO6a0ae.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)">
<img id="drag15" src="http://i.imgur.com/50c1YvW.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)">
<img id="drag16" src="http://i.imgur.com/BHn8uyJ.png" draggable="true" ondragstart="drag(event)" align="left" onclick="rotate90(this)">
<img id="RED1" src="http://i.imgur.com/By4xvE5.png" draggable="true" ondragstart="drag(event)" align="left">
<img id="RED2" src="http://i.imgur.com/By4xvE5.png" draggable="true" ondragstart="drag(event)" align="left">
<img id="GREEN1" src="http://i.imgur.com/nFzIajN.png" draggable="true" ondragstart="drag(event)" align="left">
<img id="GREEN2" src="http://i.imgur.com/nFzIajN.png" draggable="true" ondragstart="drag(event)" align="left">
<img id="BLUE1" src="http://i.imgur.com/dYNAatC.png" draggable="true" ondragstart="drag(event)" align="left">
<img id="BLUE2" src="http://i.imgur.com/dYNAatC.png" draggable="true" ondragstart="drag(event)" align="left">
<div id="RedLine"></div>
<div id="GreenLine"></div>
<div id="BlueLine"></div>
</div>

感谢您对这个项目的所有帮助！

Answer 1

您可以使用以下方法对齐图像：

#bin3 {
  height: 250px;
  padding: 10px;
  border: 2px solid black;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

您可能希望使用边距在它们之间放置一些 space。

Answer 2

我认为到目前为止的答案都很好，但我也认为您需要认识到问题的根源。这是 wordpress 中的默认行为，即在您的内容中注入 p-tags 和 br-tags 而不是空行和后图像等。我宁愿称其为功能而不是错误。喜不喜欢

对于普通的博客内容，通常还不错。它可能会改善对 HTML 或其他类型一无所知的普通 WP 用户的生活。但是可以肯定的是，当你不想要那些标签时，这确实很烦人。

您可以过滤内容。删除 p/br 标签，但这几乎改变了 wordpress 的默认行为：

还有插件：

就我个人而言，我不喜欢为每一件小事都添加一个插件。我可能会使用自定义页面模板（您的页面看起来足够自定义），因此对于该特定页面，您使用单独的 html(php)-file:

https://developer.wordpress.org/themes/template-files-section/page-template-files/#creating-a-custom-page-template-for-one-specific-page

我相信还有其他解决方法。

WordPress 图像不一致

WordPress image inconsistency

html

css

wordpress

image

jsbin