正确使用CSS清除属性？不同浏览器上的格式化不同

Question

不好意思，如果这真的是一件很简单的事情，我好像搞不定。我想我需要用 清楚 但它的工作不对（或者说我没有正确使用它）。

我在做一个很简单的页面，左边浮动一个图片标志，右边是文字。然后使用换行符来分割图片文字（你可以在这里看到例子。http:/transitions-london.co.ukindex.phptestimonials）。

它在firefox上看起来很好，但移到safari或chrome上，格式化会将一些图像文本移到右边。另外，当你向上或向下缩放（cmd +-）时，格式也会改变。

我想我需要使用 <div style="clear: both;"> 每次 <hr /> 但当我这样做时，什么都没有发生，Joomla编辑器在保存后删除代码。

每个推荐（标志的块，然后文本）目前编码是这样的。

<div style="float: left;"><img src="images/otherlogos/nationalgrid92.png" border="1" alt="National Grid" width="92" height="92" style="padding: 20px;" /></div>
<p>"Transitions opens up an avenue for us to recruit a diverse graduate workforce. There's an option for recruiting to more experienced roles too. There's a real demand in the UK for highly skilled candidates in cables and tunnels and this presents a real alternative to find international people without the complexities around international recruitment. Some of these people may have experience in their home country that we just don't have here. If the requirements change quickly we can now respond quickly."</p>
<h5 style="text-align: right;">Sharon Goymer, Graduate Resourcing Manager, Development Programmes, National Grid</h5>
<hr />
<div style="float: left;"><img src="images/otherlogos/crossrail92.png" border="1" alt="National Grid" width="92" height="92" style="padding: 20px;" /></div>
<p>“We gained a first-class civil engineer employee as a result of Transitions.  The internship and recruitment service and candidate was above our expectations..  The refugee community offers a good untapped market.“</p>
<p> </p>
<p> </p>
<h5 style="text-align: right;">Dawn Barker, Crossrail Head of HR, Crossrail</h5>
<hr />

真的很感谢你的帮助 我知道这可能是非常简单的。

干杯，N

Answer 1

你的模板已经有一个类 clr 你可以使用。试着把它添加到你的 <hr> 元素，像这样。

<hr class="clr">

如果Joomla所见即所得编辑器继续将其删除，那么在你的Joomla CSS文件中添加以下内容。

hr {clear: both}