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元素對齊到右側填充左側空間到另一個動態元素

回答

相關問題