Question

好的伙计们，这是我的问题。我的网站上有一个导航栏，可以由网站管理员自定义 - 他可以添加链接到导航栏，这样该列表就具有动态宽度。在条形图的右上角，我有一个带搜索框的div元素。这些是这两个div的CSS属性：

.head_navigation
{
    float:left;
    height:51px;
    padding-top:7px;
    margin:0;
    border:0;
    background:url("images/top_nav_bckg.gif") repeat-x bottom;
    text-align: center;
}

.head_navigation_right{
    float:right;
    border:0;
    margin:0;
    padding:0;
    padding-top:7px;
    height:51px;
    background:url("images/top_nav_bckg_right.gif") repeat-x bottom;
    text-align:right;
}

我无法使正确的div填充其左侧的空白区域。由于左边div是动态的，我不能为正确的边设置固定边距。我也尝试过：

width: 100%;

并将右侧div放到下面的行中并填充整个页面。有什么帮助吗？

Answer 1

http://jsfiddle.net/Zx9gw/1/

从head_navigation_right中删除float属性。

.head_navigation_right{
    border:0;
    margin:0;
    padding:0;
    padding-top:7px;
    height:51px;
    background:url("images/top_nav_bckg_right.gif") repeat-x bottom;
    text-align:right;
}

不幸的是我无法告诉你为什么会这样，我可以假设：float会更改元素的显示，这样任何其他元素都会占用剩下的空间。

Answer 2

将左右div放入具有所需背景的div容器中。

例如：

<div id="menuBar">
     <div class="head_navigation"></div>
     <div class="head_navigation_right"></div>
     <div style="clear:both"></div>
</div>

然后给menuBar你想要的背景......希望我理解正确的问题。

编辑 - 另一种解决方案

制作.head_navigation和.head_navigation_right位置的容器：relative;并给出一个高度，如果它没有一个。然后将此应用于您的CSS：

.head_navigation
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:1;
    height:51px;
    padding-top:7px;
    margin:0;
    width:100%;
    border:0;
    background:url("images/top_nav_bckg.gif") repeat-x bottom;
        text-align: center;
}

.head_navigation_right{

    position:absolute;
    right:0px;
    top:0px;
    z-index:2;
border:0;
margin:0;
padding:0;
padding-top:7px;
height:51px;
background:url("images/top_nav_bckg_right.gif") repeat-x bottom;
text-align:right;
}

HTML元素与右侧对齐，以将左侧空间填充到另一个动态元素

2 个答案: