内部 div 与父级的宽度不匹配答案

【问题标题】：inner div not matching width of parent内部 div 与父级的宽度不匹配
【发布时间】：2012-05-04 07:51:27
【问题描述】：

我有 3 个内部 div 都向左浮动。它们被包裹在一个宽度为 100% 的父 div 中。我将我的第一个内部 div 设置为特定宽度，然后我的下一个设置为重复 x 背景，右边的位于旁边。

它们里面没有内容只是用来保存背景精灵。所以你有一个左 div、中心 div 和右 div。中间的会平铺，而外面的不会。我遇到的问题是它们需要特定的宽度，否则背景不会显示。有没有办法让中心显示。我尝试了 100% 的宽度，但它什么也没做。我可以让它工作的唯一方法是将父级的显示设置为表格。然后内部的表格单元格。但这在 IE7 中不受支持。

            <div id="subNav">
                <div class="subNav-left"></div>
                <div class="subNav-middle"></div>
                <div class="subNav-right"></div>
            </div>

【问题讨论】：

您能添加一些标记吗？
为什么div的高度为0px时会显示背景（颜色或图像）？请记住，您必须在 div 中包含一些东西（甚至是），或者将其高度设置为实际上大于 0px 高...

标签： html css

【解决方案1】：

我了解到您希望显示流畅的背景。第一个 div 显示条带的左侧部分，第三个显示最后一个，中间的一个重复背景，因此它可以是流动的。要在不进行额外编码的情况下实现这一点，只需将重复背景分配给主 div，并浮动两个内部 div，并使用它们各自的背景：

<div id="subNav">
    <div class="subNav-left"></div>
    <div class="subNav-right"></div>
    <div class="clear"></div>
</div>

还有css：

<style>
#subNav{
    background: url(repeating_bk.png) top left repeat-x;
    width:100%;
}
.subNav-left{
    width: 50px; /* specified */
    height: 20px; /* specified */
    background: url(left.png) top left no-repeat;
    float:left;
}
.subNav-right{
    width: 50px; /* specified */
    height: 20px; /* specified */
    background: url(right.png) top right no-repeat;
    float:right;
}
.clear { clear:both; }
</style>

希望对你有帮助。

【讨论】：