下边界不会到底？

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

我的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; 
}

来源

2011-05-07 user622378

一个古怪的，用的DIV溢出：隐藏做成长为包含其浮动元素。这确实是一个黑客，但它可以跨浏览器。由于包含的DIV没有给出任何明确的大小，所以overflow：hidden没有其他作用。

来源

2011-05-07 15:31:48 jpsimons

谢谢，通过添加溢出修复了问题：隐藏在。rowOrder css。底部边框是预期的全宽，但为什么float：left;不这样做？ – user622378 2011-05-07 15:49:46

一旦你漂浮它留下的一般流程的项目，是指包含div不会充当一个包含分区，用于例如，包含div的边框。解决方案，在年底rowOrder风格=“明确：既”添加另一个专区（或试图给这最后的内部DIV
你不需要给你的div display: block
不要给你跨度display: block只是用DIV
看样子你尝试代表表格数据。语义在这种情况下是使用<table>标签。

来源

2011-05-07 14:45:32

+1有关“看起来你尝试表示表格数据的好评”，这种情况下的语义是使用'

'标签。无表不会停止在你的余生中使用表格。 – 2011-05-07 15:04:30

你可以尝试在要素指着萤火虫突出其中的div自己定位（或在其上放置背景色）。

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

来源

2011-05-07 14:47:40 Kaido

谢谢，关于跨度删除的意见 – Kaido 2011-05-07 14:53:45

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

您可以通过使用Firebug（FF扩展）例如，并检查rowOrder div来轻松地看到这一点。你应该看到它没有完整的应有的高度。您的订单ID和公司div有一定的高度，但包含的div（例如rowOrder）的高度更低。这是浮标未被清除的典型指标。 rowOrder div至少应该包含所有内容的高度。

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

来源

2011-05-07 14:48:05 Vodde

浮动元素在父高度计算上不匹配。而浮动属性不应该用于简单的元素对齐。为此，我们有 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; 
}

来源

2011-05-07 14:55:03 cvsguimaraes

下边界不会到底？

回答

相关问题