html - CKEditor尊重 block 元素

标签 html css ckeditor

我试图让 CKEditor 尊重像 div 这样的 block 元素,但我无法让它工作。

这是我使用的示例代码

<div class="row" >
<div class="col-md-12">
<h1><img alt="" src="http://placehold.it/252x337" style="margin-left: 10px; margin-right: 10px; float: left; width: 252px; height: 337px;" />What is it?</h1>

<p><span style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans; font-size: 11px; line-height: 14px; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor elit venenatis tristique mollis. Ut quis ipsum lectus. Curabitur vestibulum, ipsum ac molestie posuere, dolor est faucibus risus, id volutpat nisi magna vel velit. Pellentesque vel interdum mi. In justo erat, hendrerit a ultricies nec, pharetra vitae nisl. Fusce vel purus risus. Etiam porttitor varius turpis, sed vehicula arcu aliquam eu. Morbi vehicula euismod nibh, ut semper nulla sollicitudin a. Morbi vitae tellus auctor, sollicitudin arcu sed, porta urna. Maecenas eu scelerisque orci. Proin vitae lobortis nisi, at suscipit mauris. Nam eu ultrices velit, nec mattis velit. Ut feugiat lorem lectus, nec feugiat justo ultricies non.</span></p>
</div>
</div>
<!-- /row -->

<div class="row" >
<div class="col-md-12">
<h1>Lorem</h1>

<p><img alt="" src="http://placehold.it/168x113" style="margin: 0px 10px; float: right; width: 168px; height: 113px;" /><span style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans; font-size: 11px; line-height: 14px; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor elit venenatis tristique mollis. Ut quis ipsum lectus. Curabitur vestibulum, ipsum ac molestie posuere, dolor est faucibus risus, id volutpat nisi magna vel velit. Pellentesque vel interdum mi. In justo erat, hendrerit a ultricies nec, pharetra vitae nisl. Fusce vel purus risus. Etiam porttitor varius turpis, sed vehicula arcu aliquam eu. Morbi vehicula euismod nibh, ut semper nulla sollicitudin a. Morbi vitae tellus auctor, sollicitudin arcu sed, porta urna. Maecenas eu scelerisque orci. Proin vitae lobortis nisi, at suscipit mauris. Nam eu ultrices velit, nec mattis velit. Ut feugiat lorem lectus, nec feugiat justo ultricies non.</span></p>
</div>
</div>

这是结果 enter image description here

这是我期望的样子

enter image description here

我还尝试将 div 的宽度设置为 100%,但没有成功。 据我所知, block 元素会占用尽可能多的空间。但它似乎在 CKEditor 中不起作用。 那么是否有可能实现我想要做的事情?

最佳答案

您的代码正常运行:http://jsfiddle.net/b08yhh56/ .第一张图片是 float 的,这使它脱离了正常的文档流,其他一切都围绕着它流动。这与 CKEditor 无关。

要获得您正在寻找的结果,请将 clear:left 添加到后续的 div http://jsfiddle.net/b08yhh56/1/

关于html - CKEditor尊重 block 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28925300/

相关文章:

html - @media 宽度和字体大小

html - 两个 div 左右浮动发生了什么

javascript - 富文本编辑器改变风格

javascript - 更改日期时间选择器下拉小部件内的字形图标颜色

javascript - 内联 HTML javascript 事件将转义引号解释为结束引号

html - 是否可以为 100% 搜索框设置内联搜索按钮?

javascript - ckeditor 导致后续脚本中以 @ 为前缀的注释在 IE 10 中作为代码执行

javascript - CKEditor - 在工具栏中显示没有表格按钮的表格?

javascript - jquery 选项卡的 onclick 事件

javascript - 如何使文本在屏幕上来回移动?