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进行模仿表行为，恕我直言是没有意义的

Answer 3

不需要冗余div，

添加：

overflow:auto;

到

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

Answer 4

您需要清除浮点数，因此包含的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>

Answer 5

以表格格式获取内容的方法是在rowcontainer div中使用span而不是div，并将display设置为inline-block，如下所示

    <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不围绕文字？

5 个答案: