Question

我试图将边框放在此div的顶部并位于底部。但是，此代码会使边框显示在＆＃39;标题下方。复制而不是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

这种情况正在发生，因为你没有清除你的花车：）

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

注意＆＃39;明确：两者都是＆＃39;在底部......应该解决你的问题

Answer 2

<div style='border-top: solid; border-bottom:solid; overflow:hidden;'>

这是因为所有那些花车，正如Eyal指出的那样。我会“重拍”整个div不使用浮点数和边距，而是以div为中心。

修改

我会这样做：

<div style="border-top: solid;text-align: center;border-bottom: solid;"> <div> <p> <a href="http://www.me.com">Title</a> </p> </div> <div class="competition_image" style="margin: 0 auto;float: none;"> <%= image_tag "me.png"%> </div> <div class="competition_image" style="float: none;margin: 0 auto;"> <%= image_tag "mescreenshot.png"%> </div> <div> <p> <a href="http://www.me.com">Click here to read full article</a> </p> </div> </div>

Answer 3

<div style='border:1px solid red;border-left:1px solid transparent;border-right:1px solid transparent;">

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

3 个答案: