列不会与所见即所得编辑器保持一致

Question

有人能帮我一下吗，Wordpress的wysiwyg编辑器在3个简单的列的布局上让我头疼！

这就是页面，因为你可以看到每一列似乎都在下降，我看不出我做错了什么，也看不出编辑器放了什么！！

http://zonedigital.ie/pharmatherm/?page_id=6494

源代码如下：

​

<div class="one_third first_column"><img class="textmiddle alignleft" src="http://zonedigital.ie/pharmatherm/wp-content/uploads/2015/01/Adobe-Acrobat-icon-150x150.png" alt="Adobe-Acrobat-icon" width="20" height="20" /> Document 1</p>
<img class="textmiddle alignleft" src="http://zonedigital.ie/pharmatherm/wp-content/uploads/2015/01/Adobe-Acrobat-icon-150x150.png" alt="Adobe-Acrobat-icon" width="20" height="20" /> Document 2

</div>
<div class="one_third second_column">
<p style="text-align: left;"><img class="textmiddle alignleft" src="http://zonedigital.ie/pharmatherm/wp-content/uploads/2015/01/Adobe-Acrobat-icon-150x150.png" alt="Adobe-Acrobat-icon" width="20" height="20" /> Document 3</p>
<img class="textmiddle alignleft" src="http://zonedigital.ie/pharmatherm/wp-content/uploads/2015/01/Adobe-Acrobat-icon-150x150.png" alt="Adobe-Acrobat-icon" width="20" height="20" /> Document 4

</div>
<div class="one_third third_column">
<p style="text-align: left;"><img class="textmiddle alignleft" src="http://zonedigital.ie/pharmatherm/wp-content/uploads/2015/01/Adobe-Acrobat-icon-150x150.png" alt="Adobe-Acrobat-icon" width="20" height="20" /> Document 5</p>
<img class="textmiddle alignleft" src="http://zonedigital.ie/pharmatherm/wp-content/uploads/2015/01/Adobe-Acrobat-icon-150x150.png" alt="Adobe-Acrobat-icon" width="20" height="20" /> Document 6

</div>

​

谢谢

Answer 1

您需要删除列之间的换行符(<br>标记)。也许可以将编辑器切换为纯文本来完成此操作。