Question

enter image description here 我有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

您可以使用表格（宽度：100％）代替外部div。替换顶部边框和顶部菜单使用td。对于顶部边框td，请使用css“width：1px; white-space：nowrap;”

Answer 2

您可以将word-wrap CSS属性与width一起使用，您将得到您想要的内容。

这是Solution。

HTML：

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

CSS：

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

我希望这有助于。

修改

如果宽度必须是动态的。这是Solution。

HTML：

<div id="top"> <div id="top-border">The Quick Brown Fox jumps Over The Lazy Dog. The Quick Brown Fox jumps Over The Lazy Dog. The Quick Brown Fox jumps Over The Lazy Dog. The Quick Brown Fox jumps Over The Lazy Dog. The Quick Brown Fox jumps Over The Lazy Dog. </div> <div id="op-menu"> <jdoc:include type="modules" name="top-menu" style="well" />def</div> </div>

CSS：

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

我希望现在有所帮助。

编辑 - 2

这是Solution，没有定义任何宽度，并根据内容独立移动框。

HTML：

<div id="top"> <div id="top-border">The Quick Brown Fox jumps Over The Lazy Dog. The Quick Brown Fox jumps Over The Lazy Dog. The Quick Brown Fox jumps Over The Lazy Dog. The Quick Brown Fox jumps Over The Lazy Dog. The Quick Brown Fox jumps Over The Lazy Dog. </div> <div id="top-menu"> <jdoc:include type="modules" name="top-menu" style="well" />def</div> </div>

CSS：

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

希望这有助于现在。

Answer 3

不确定我是否正确理解了这个问题，但在我看来top-border div是多余的。不要将元素纯粹用于演示钩子。您可以将顶部边框设置为top-menu div或padding-top和背景图像。正如您已经看到的那样，浮动顶级菜单使其仅与其内容一样宽。 display: inline-block;或display: table会发生同样的情况。

编辑：哦，对不起，我看到你现在在问什么。这是一种在没有图像的情况下可以做到这一点的简单方法（尽管您也可以使用图像）：http://codepen.io/pageaffairs/pen/ECFny

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
body {margin: 0; padding: 0;}

#top {
    width:100%;
    overflow: hidden;
    background: #f7f7f7;
}

#top ul {
    margin:0;
    list-style: none;
    float:right;
    position: relative;
    padding: 0;
}

#top li {
    margin: 0 0 0 20px;
    float: left;
}

#top li a {
    display: block;
    line-height: 40px;
}

#top ul:before {
    content:" ";
    height: 0;
    width:999em;
    right:100%;
    border-top: 2px dashed #000;
    position:absolute;
    top:19px;
}

</style>

</head>
<body>

<div id='top'>
    <ul> 
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 1</a></li>
    </ul>
</div>

</body>
</html>

Answer 4

在为该元素指定一些宽度或在其中放入一些内容之前，您无法仅使用背景图像显示div。

因此，要显示＃top-border div，您必须填写一些内容或给出一些宽度。

如何给外部div内的div自动宽度？

4 个答案: