我试图让 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>
这是结果
这是我期望的样子
我还尝试将 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/