填充div的空格

我想要一個元素來填充父div的剩餘空間。我設法做到這一點，你可以在這裏看到它的「鏈接刪除」，但填充格（右）位於左邊的div下面。我bascially想要正確的div開始的地方，左div完成。填充div的空格

希望這是有道理的。

<html> 
    <head> 
    <title></title> 
    <style type="text/css"> 
    #left { 
     float:left; 
     width:180px; 
     background-color:#ff0000; 
     height:20px; 
    } 
    #right { 
     width: 100%; 
     background-color:#00FF00; 
     height:30px; 
    } 
    </style> 
    </head> 

    <body> 
    <div> 
    <div id="left">Nav</div> 
    <div id="right">This is the space I need to fill but not go underneath the nav div</div> 
    </div> 
    </body> 
    </html>

來源

2011-06-20 Mitch

加浮動：權利#right –

我不認爲這是可能的，以填補寬度100％，該空間。獲得正確的div不能在左邊的div下的唯一方法是浮動右邊的div，但是當你這樣做時，寬度100％會導致它進入下一行。如果你刪除寬度100％，它確實堆疊在左側div旁邊，但不會完全填滿。你可能不得不重新評估你的方法，如果我知道你正在努力完成什麼，這將會更容易，所以我可以提供替代解決方案。 – Zoidberg

在#right，只需刪除width: 100%，並添加overflow: hidden。

參見：http://jsfiddle.net/hJzJf/ - （我假設你height s爲只是爲了測試目的）

爲什麼這項工作？

參見：http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats

來源

2011-06-20 11:04:55 thirtydot

我不知道那個竅門，很棒的鏈接！ – Kyle

我從來不知道這件事。每天學習新東西。 +1 – Till

+1大伎倆:) – sandeep

在#right元素上設置margin-left: 180px;。這將通過第一個元素的寬度來抵消它。

http://jsfiddle.net/DHSej/

來源

2011-06-20 10:54:58 Kyle

這將會將180px的#right移出可見區域，這可能會或可能不會引起Mitch – Till

Leg-End！不能相信我忽略了這一點。好一個。 – Mitch

填充div的空格

回答

相關問題