html - 使用 float 和边距 : auto 的 TinyMCE 怪异图像对齐

Question

我正在使用 TinyMCE 4。在编辑器中对齐图像时的行为很奇怪。

• 左对齐
  
  • 实际:style="float: left;"
  • 预计:<p style="text-align: left"><img ... /></p>
• 右对齐
  
  • 实际:style="float: right;"
  • 预计:<p style="text-align: right"><img ... /></p>
• 居中对齐
  • 实际:style="display: block; margin-left: auto; margin-right: auto"
  • 预计:<p style="text-align: center"><img ... /></p>

应用 float 会导致意外行为。例如，像这样在两条线上拍摄两张图片:

[img 1]
[img 2]

如果我对第一个应用左对齐，对第二个应用右对齐，由于 float ，它们会出现在同一行上:

[img 1]                        [img 2]

我希望它的行为与文本相同:

[img 1]
                               [img 2]

有没有办法在 TinyMCE 4 中更改或覆盖此行为？

Answer 1

由于你的 float 元素正在失去它的高度，它们排成一行。

您只需要在它们之间使用 css 中的 clear:both; 添加元素。 JSFiddle