0

在此处输入图像描述我有 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;
}

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

4

4 回答 4

0

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

于 2013-05-21T08:23:33.717 回答
0

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

这是解决方案。

的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;
}

我希望这有帮助。

编辑

如果宽度必须是动态的。这是解决方案。

的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

这是没有定义任何宽度并根据其拥有的内容独立移动框的解决方案。

的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;
}

希望现在有帮助。

于 2013-05-21T08:28:01.843 回答
0

不确定我是否正确理解了这个问题，但在我看来top-borderdiv 是多余的。不要将元素纯粹用于表现挂钩。您可以为top-menudiv 或 padding-top 和背景图像设置顶部边框。正如您已经看到的，浮动顶部菜单使其仅与内容一样宽。display: inline-block;or也会发生同样的情况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>
于 2013-05-21T08:47:49.180 回答
0

在为该元素指定一些宽度或将一些内容放入其中之前，您不能只显示带有背景图像的 div。

所以要显示#top-border div，你必须用一些内容填充它或给它一些宽度。

于 2013-05-21T08:49:38.583 回答