CSS 边框无法显示在正确的位置

Question

我试图在这个 div 的顶部和底部放置一个边框。但是，此代码会导致边框显示在“标题”副本下方，而不是显示在 div 的末尾。

<div style='border-top: solid; border-bottom:solid'>
    <div>
      <p style='margin-left:200px;'>
        <a href="http://www.me.com">Title</a>
      </p>
    </div>
    <div class="competition_image" style='margin-left:125px;'>
      <%= image_tag "me.png"%>
    </div>
    <div class="competition_image" style='width: 600px; margin-left:125px;'>
      <%= image_tag "mescreenshot.png"%>
    </div>
    <div>
      <p style='float:left; margin-left: 200px;'>
        <a href="http://www.me.com">Click here to read full article</a>
      </p>
    </div>
</div>

有人知道为什么会这样吗？

Answer 1

发生这种情况是因为您没有清除 float :)

<div style='border-top: solid; border-bottom:solid'>
    <div>
      <p style='margin-left:200px;'>
        <a href="http://www.me.com">Title</a>
      </p>
    </div>
    <div class="competition_image" style='margin-left:125px;'>
      <%= image_tag "me.png"%>
    </div>
    <div class="competition_image" style='width: 600px; margin-left:125px;'>
      <%= image_tag "mescreenshot.png"%>
    </div>
    <div>
      <p style='float:left; margin-left: 200px;'>
        <a href="http://www.me.com">Click here to read full article</a>
      </p>
    </div>
<div style="clear:both;"></div>
</div>

注意底部的“clear:both”..应该可以解决您的问题