我有 3 个内部 div,它们都向左浮动。它们被包裹在宽度为 100% 的父 div 中。 我将我的第一个内部 div 设置为特定宽度,然后我的下一个设置为重复 x 背景,右边的位于旁边。
它们里面没有内容,只是用来容纳背景 Sprite 。 所以你有一个左边的 div、中间的 div 和右边的 div。 中间的会平铺,外面的不会。我遇到的问题是他们需要一个特定的宽度,否则背景不会显示。有没有办法让中间的宽度显示出来。我试过 width 100% percent 但它什么也没做。我能让它工作的唯一方法是将父级的显示设置为表格。然后是内部的表格单元格。但这在 IE7 中不受支持。
<div id="subNav">
<div class="subNav-left"></div>
<div class="subNav-middle"></div>
<div class="subNav-right"></div>
</div>
最佳答案
我知道您想显示流畅的背景。第一个 div 显示 strip 的左侧部分,第三个显示最后一个,中间一个重复背景,因此它可以是流畅的。要在没有额外编码的情况下实现这一点,只需将重复的背景分配给主 div,并 float 两个内部 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>
希望对您有所帮助。
关于html - 内部div与父级的宽度不匹配,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10440789/