html - 如何为外部div内的div提供自动宽度？

Question

我有div

<div id='top' >
    <div id='top-border' > </div>
    <div id='top-menu' > <jdoc:include type="modules" name="top-menu" style="well" /></div>
</div>

和风格

#top {
    width:100%;
    height:40px;
    overflow: hidden;
}
#top-border {
    background: url(../images/border.png) repeat-x scroll 0px 18px;
    position: relative;
    /*width:74%;*/
    height:40px;
    float:left;
    overflow: hidden;
}
#top-menu {
    margin:0;
    float:right;
    height:40px;
    padding-top:6px;
}

我想将内容放在顶部菜单中，以便它会根据其内容自动缩小。其余宽度将分配给具有背景图像的顶部边框。当我给顶部边界宽度时，它工作正常。但我想要不固定的灵活宽度。有什么想法吗？

Answer 1

您可以使用 table(width:100%) 代替外部 div。使用 td 替换顶部边框和顶部菜单。对于顶部边框 td 使用 css "width: 1px; white-space: nowrap;"