内部div不匹配父级的宽度

时间:2012-05-03 23:33:27

标签: html css

我有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>

1 个答案:

答案 0 :(得分:1)

据我所知,你想表现出流畅的背景。第一个div显示条带的左侧部分,第三个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>

希望它有所帮助。