Question

由于某种原因，底部边框不会显示在底部？边框线出现在内容的顶部，这是什么原因？

我的css好吗？

HTML

<div class="rowOrder">
    <div class="orderid">
        <span>07/04/2011</span>
        OrderID 1234
    </div>
    <div class="company">
        My Company
    </div>
</div>

CSS

.rowOrder {
    padding:3px;
    border-bottom: solid 1px #B4CE51;
    display:block;
}
.rowOrder .orderid {  float:left; margin-right:30px;  }
.rowOrder .orderid span {
    display:block;
}

.rowOrder .company {
    float:left;
    font-weight:bold;
}

Answer 1

一旦浮动一个项目就会离开一般流程，意味着包含的div不会作为包含div，例如，对于包含div的边框。解决方案，在rowOrder的末尾添加另一个div，其中style =“clear：both”（或者尝试将其赋予最后一个内部div。
您无需提供div [{1}}
不要让你的范围display: block只使用div
您似乎尝试表示表格数据。在这种情况下，语义是使用display: block标记。

Answer 2

你可以利用的一个奇怪之处是，带有溢出的DIV：隐藏做增长以包含它们的浮动元素。这是一个黑客确定，但它跨浏览器工作。溢出：隐藏没有其他影响，因为包含DIV没有给出任何明确的大小。

Answer 3

您可以尝试在元素上指向Firebug以突出显示div自身定位的位置（或在其上放置背景颜色）。

也许这是一个浮动问题（尝试浮动.rowOrder离开？）

Answer 4

浮动元素搞砸了HTML的流程，所以你必须考虑到这一点。这就是这里发生的事情。

您可以通过使用Firebug（FF扩展名）和检查rowOrder div轻松看到这一点。你应该看到它没有应有的全高。您的orderID和公司div具有一定的高度，但包含div（例如rowOrder）的高度要小得多。这是浮标未被清除的典型指标。 rowOrder div应该至少包含它所包含的所有内容的高度。

Itay的答案解决了这个问题。

Answer 5

浮动元素在父高计算上不匹配。并且float属性不应该用于简单的元素对齐。为此，我们有 align属性或父元素的text-align属性。

试试这个：

.rowOrder {
    padding:3px;
    border-bottom: solid 1px #B4CE51;
    display:block;
    text-align:left;
}
.rowOrder  {
    margin-right:30px;
}
.orderid, .company{
    display:inline-block;
    vertical-align:top;
}
.rowOrder .company {
    font-weight:bold;
}

底边不到底？

5 个答案: