奇怪的对齐问题

时间:2011-05-19 14:06:58

标签: html css css-float

如果你看一下这里是下面的代码以供将来参考。

<h1>Accreditations</h1>
<p>
<strong>
  <a href="BRCCertificateE.PDF">
  <img src="images/brc.png" width="150" height="60"
  border="0" />BRC Standard</a>
</strong>
<br />The British Retail Consortium (BRC) Global Standard for
Packaging has been developed to set out hygiene and quality
requirements for packaging manufacturers</p>
<div>
  <strong>
    <a href="9001certificate.pdf">
    <img src="images/iso.png" alt="" width="150" height="60"
    border="0" />ISO900</a>
  </strong>
  <a href="#">
    <strong>1</strong>
  </a>
  <strong>:2008</strong>
  <br />
  <p>is a recognised quality management standard that we use to
  ensure we manufacture all of our products to the highest
  standards.</p>
  <p>
  <strong>
  <a href="FSC Certificate.pdf">
    <img src="images/fsc.png" width="150" height="60" border="0" />
  </a>FSC</strong>
  <strong>Chain of Custody</strong>
  <br />The Forestry Stewardship Council (FSC) monitors the use of
  timber in paper and board based products, ensuring that material
  used is coming from areas of forest that are managed responsibly.
  The FSC Chain of Custody certification tracks the FSC certified
  material through the production processes all the way to the
  store.</p>
  <p>
  <strong>Environmental issues</strong>
  <br />These have to be at the top of the agenda for the customer
  and for the packaging producer. We believe that cartonboard
  represents the most environmentally friendly form of packaging
  available due to the consumer being able to recycle 100% of the
  product.</p>
</div>

感谢天才们想到的任何帮助

3 个答案:

答案 0 :(得分:1)

这是因为第二个链接中的图像是float: left,影响了下面的文档流。

最简单的解决方法是添加

clear: both

到包含第三个项目的<p>元素。

答案 1 :(得分:0)

将此属性添加到您的fsc链接

style="display: block; width: 60px;"

答案 2 :(得分:0)

它上方的<p>上的填充不足以打破图像下方。因此,受影响的<p>实际上仍位于其上方<p>的图像旁边。