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

好吧，这是我的问题。我的网站上有一个导航栏，可以由网站的管理员自定义 - 他可以添加链接到导航栏，以便列表具有动态宽度。在酒吧的右角，我有一个带搜索框的div元素。这是这两个div的CSS属性：HTML元素对齐到右侧填充左侧空间到另一个动态元素

.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%;

和它把正确的股利低于该行并填充整个页面。任何帮助？

来源

2012-07-04 Marko Cakic

请问有人吗？ –

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

不幸的是我不能告诉你这是为什么，我也只是假设：浮动改变元素的展示，让所有其他元素将采取的剩余空间。

来源

2012-07-04 11:39:34 Slomo

这个伎俩，非常感谢！起初我的左格没有动态，我有固定的宽度，所以float：right做了这个工作。但是，现在，我改变了这一点，我没有猜测float：right会是问题。再次感谢。 –

顺便说一句，如果'.head_navigation_right'碰巧比左边的高，这看起来很有趣。仍然非常有用！ – Kos

我想你的意思是将出现在左侧内容下方的红色背景。如果是这样 - 这实际上就是float：left所做的。这就像把一个图像放在一个文字文档中，文字包装设置为矩形。如果这不是你所需要的，你可能需要在div上使用表格或设置宽度/高度。 – Slomo

将左右两个div放在一个div容器中，并放入所需的背景。

例如：

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

然后给菜单栏你想要的背景...希望我理解这个问题的权利。

编辑 - 另一种解决方案

使.head_navigation和.head_navigation_right位置的容器：相对;并给出一个高度，如果它没有一个。然后将此你的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; 
}

来源

2012-07-04 11:38:06 BjarkeCK

我认为这也可以起作用。尽管我已经用Slomo的建议解决了它。不管怎么说，还是要谢谢你。 –

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

回答

相关问题