正确使用CSS clear属性?不同浏览器的格式不同

时间:2013-11-22 13:15:50

标签: css html browser formatting clear

道歉,如果这是一件非常简单的事情,我似乎无法得到它。我认为我需要使用 clear ,但它无法正常工作(或者我没有正确使用它)。

我正在做一个非常简单的页面,左边是一个图像徽标,右边是文本。然后使用换行符分解图像/文本(您可以在此处查看示例:http://transitions-london.co.uk/index.php/testimonials

它在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

1 个答案:

答案 0 :(得分:0)

您的模板已经有一个可以使用的课程clr。请尝试将其添加到<hr>元素中,如下所示:

<hr class="clr">

如果Joomla WYSIWYG编辑器继续删除它,那么将其添加到你的一个Joomla CSS文件中

hr {clear: both}