div上的'border-bottom'出现在顶部？Div不围绕文字？

Question

我正在创建一个类似于div中数据视图的表格.由于我使用的企业框架,我不得不使用大量的内联HTML和CSS.

可视化它的方法:每行都有一个容器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>

谢谢你的帮助

Answer 1

这是因为你是浮动内部div,浮动外部div也解决这个问题.

浮动元素时,父元素不会扩展到其子元素的高度,除非它自己浮动,或者有另一个非浮动子元素.另一个解决方案是,如果不能浮动父级,则在当前未浮动的子级之后添加元素并清除其他元素.例如,在内部div之后添加它

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

Answer 2

如果要显示表格数据,为什么要使用DIV？

表只是为了这个!以表格方式表示数据...不要将它用于布局,而是使用DIV进行模仿表行为,恕我直言是没有意义的