css - Div 不填充 float 容器的宽度(需要 css 专家

Question

我知道发布的这个问题有很多变体，但我发现没有一个能提供适用于这种情况的答案。

我基本上有两个左浮动的 div。在这两个 div 中是 div 标题和表格内容。

我希望 Div header (小时/分钟)延伸到表格内容的宽度，但它们只在 FF 和 Chrome 中执行此操作，在 IE7 中不执行此操作。 IE7 是我工作的官方浏览器，所以我最需要它来工作。

这是 CSS:

#ui-timepicker-div { padding:0.2em; }
#ui-timepicker-hours { float:left; }
#ui-timepicker-minutes { margin:0 0 0 0.2em; float:left; }

.ui-timepicker .ui-timepicker-header { padding:0.2em 0; }
.ui-timepicker .ui-timepicker-title { line-height:1.8em; text-align:center; }

.ui-timepicker table { margin:0.15em 0 0 0; font-size:.9em; border-collapse:collapse; }
.ui-timepicker td { padding:1px; width:2.2em; }
.ui-timepicker th, .ui-timepicker td { border:0; }

.ui-timepicker td a {
    display:block;
    padding:0.2em 0.3em 0.2em 0.5em;
    text-align:right;
    text-decoration:none;
}

这是 HTML(不包括表格内容):

<div style="position: absolute; top: 252.667px; left: 648px; z-index: 1; display: none;" class="ui-timepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" id="ui-timepicker-div">
<div id="ui-timepicker-hours">
<div class="ui-timepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
<div class="ui-timepicker-title">Hour</div>
</div>
<table class="ui-timepicker">
</table>
</div>
<div id="ui-timepicker-minutes">
<div class="ui-timepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
<div class="ui-timepicker-title">Minutes</div>
</div>
<table class="ui-timepicker">
</table>
</div>
</div>

Answer 1

很抱歉回答我自己的问题，但在几个小时后我才发现通过从 ui-timepicker-header 中删除“ui-helper-clearfix”类，现在所有这些都在 IE7 和 FF 中运行良好