强力漂浮：对吧？

Question

我在Joomla中有一个自定义html框，内容如下

＆＃13;

＆＃13;

<span style="color: #FFFFFF; font-size: 1em; padding-top:5px;">

<p style="float: right; display: inline-block; white-space: nowrap; margin-bottom: 5px;"><img src="/images/telephone_call_contact.png"> 0000000000</p>
<br>
<p style="float: right; display: inline-block; white-space: nowrap;"><img src="/images/email_envelope.png"> contact@email.co.uk</p>
<br>
<p style="float: right; display: inline-block; white-space: nowrap;"><img src="/images/shop_open.png"> Open 7 Days 5:00pm-11:00pm </p>
</span>

＆＃13;

＆＃13;

＆＃13;

这很好用。但是，当浏览器调整到一定级别时，将会撤消，直到您进一步调整大小。

同样，在另一个方面，他们也没有正确对齐。

有谁知道为什么会出现这种情况？

编辑：正如安东尼奥建议的那样，加上明确的说明：CSS中的p都解决了这个问题。现在问题只发生在第一行（当它之前没有）

Answer 1

将clear:both添加到您的p css规则

example

Answer 2

我认为添加clear:right可以解决您的问题，但我无法确定您的代码段中的图片无法加载。

＆＃13;

＆＃13;

<span style="color: #FFFFFF; font-size: 1em; padding-top:5px;">

<p style="float: right; display: inline-block; white-space: nowrap; margin-bottom: 5px;"><img src="/images/telephone_call_contact.png"> 0000000000</p>
<br>
<p style="float: right; display: inline-block; white-space: nowrap;clear:right;"><img src="/images/email_envelope.png"> contact@email.co.uk</p>
<br>
<p style="float: right; display: inline-block; white-space: nowrap;clear:right;
"><img src="/images/shop_open.png"> Open 7 Days 5:00pm-11:00pm </p>
</span>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你最好忘记为你的标记使用内联样式，因为它有SEO缺点。而是使用外部样式表 此外，您的标记存在一些问题，因此您最好这样做：

＆＃13;

＆＃13;

.details{
  text-align: right;
  background-color: #744C27;
}
.details span{
  display: inline-block;
  vertical-align: middle;
  color: #FFFFFF;
  font-size: 1em;
  white-space: nowrap;
}
.icons{
  width: 32px;
  height: 32px;
  margin-right: 20px;
  background-repeat: no-repeat;
}
.phone{ background-image: url( 'images/telephone_call_contact.png' ) }
.email{ background-image: url( 'images/email_envelope.png' ) }
.shop{ background-image: url( 'images/shop_open.png' ) }

＆＃13;

<div class="details">
  <div><span class="icons phone"></span><span>0000000000</span></div>
  <div><span class="icons email"></span><span>contact@email.co.uk</span></div>
  <div><span class="icons shop"></span><span>Open 7 Days 5:00pm-11:00pm</span></div>
</div>

＆＃13;

＆＃13;

＆＃13;