div上的'border-bottom'出现在顶部？ Div不包裹文本？

问题描述：

我创建了一个像divs中的数据视图一样的表格。由于我使用的企业框架，我不得不使用大量内联HTML和CSS。div上的'border-bottom'出现在顶部？ Div不包裹文本？

可视化的方式：每行都有一个容器div（rowContainer），并且每行都包含在一个div（collResult）中。我想让border-bottom元素出现在容器div的底部。在IE中，这种方式工作的很好，但在Firefox中，边界不会环绕行，而是与行结果完全不同步。

这里是我的代码示例：

<div class='rowContainer' style='border-bottom: 1px solid #B4B4B4; padding:0; width: 100%; height: auto;'> 
<div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'>Number 1</div> 
<div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'>ABCDE</div> 
<div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'>NAME</div> 
<div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'>NONE 
</div></div>

感谢所有帮助

顺便说一句，单引号是必要的，因为我正在JavaScript中编写此内容。 – 2010-11-02 09:48:23

答

这是因为你是浮动内的div，漂浮在外层div还来解决这个问题。

浮动元素时，父元素不会展开到其子级的高度，除非它正在浮动其自身，或者存在另一个非浮动子级。如果你不能浮动父项，另一个解决方案是在当前没有浮动并清除其他元素的子项之后添加一个元素。例如在内部div后添加这个

<div style="clear:both"></div>

答

您需要清除浮动，所以包含div将展开为行的大小。

<div class='rowContainer' style='border-bottom: 1px solid #B4B4B4; padding:0; width: 100%; height: auto;'> 
<div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'>Number 1</div> 
<div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'>ABCDE</div> 
<div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'>NAME</div> 
<div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'>NONE 
<div class='collClear' style='clear:left;'></div> 
</div></div>

答

删除的冗余DIV的需要，

补充一点：

overflow:auto;

到

<div class='rowContainer' style='border-bottom: 1px solid #B4B4B4; padding:0; width: 100%; height: auto;'>

答

为什么，如果你想显示表格使用的DIV数据？

表只是为了这个！以表格形式表示数据...不要将它用于布局，但使用DIV模拟表行为，恕我直言，没有意义

我知道，但我的老板不喜欢桌子。相信我我知道这个:) – 2010-11-02 09:59:15

如果你不喜欢表格数据，你的老板是错误的。用于布局的表格很好，但表格用于数据。 – 2010-11-02 10:03:21

答

以表格格式获取内容的方式是在内部使用span而不是div rowcontainer div和设置显示为内联块如下

<div class='rowContainer' style='border-bottom: 1px solid #B4B4B4; padding:0; width: 100%; height: auto;'>    
     <span class='collResult' style='width: 20%;display: inline-block;font: normal 12px Arial;'> 
     Number 1 
     </span> 
     <span class='collResult' style='width: 25%;display: inline-block; font: normal 12px Arial;> 
     Number 1 
     </span> 
     <span class='collResult' style='width: 25%;display: inline-block; font: normal 12px Arial;> 
     Number 1 
     </span> 
     <span class='collResult' style='width: 25%;display: inline-block; font: normal 12px Arial;> 
     Number 1 
     </span> 
</div>

div上的'border-bottom'出现在顶部？ Div不包裹文本？

相关推荐