div边框-折叠到0高度 [英] div border - Collapsing to 0 height

问题描述

请查看以下JSFiddle: http://jsfiddle.net/dNJxd/1/

Please check out this JSFiddle: http://jsfiddle.net/dNJxd/1/

如您所见，.left_field > div和.right_field > div处的div带有边框.但是，该边框会崩溃"到0个高度.

As you can see in there, the divs at .left_field > div and .right_field > div have a border on them. However, that border is "collapsing" to 0 height.

如果我将overflow更改为hidden(所有类似的问题都提倡这样做)，它将解决此问题，但这不是一个选择，因为它会切断我正在使用的日期控件.

If I change the overflow to hidden (all the similar questions are advocating for that), it fixes the issue, but that's not an option because it cuts off the date control that I'm using.

有什么建议吗?

推荐答案

在以下分段中:

<div>
    <span class="field_label">PO Number:</span>
    <span class="field_data">12345</span>
</div>

第一个跨度为position: absolute;，因此假定其容器中没有空间，第二个跨度为浮动空间，除非清除该空间，否则对容器空间的影响相同.

The first span has position: absolute; and as such assumes no space in its container, and the second is floating, which has that same effect on container space, unless it is cleared.

以下代码不会有相同的问题:

The following code will not have the same issue:

<div>
    <span class="field_label">PO Number:</span>
    <span class="field_data">12345</span>
    <div style="clear: both;"></div>
</div>

小提琴

这篇关于div边框-折叠到0高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！