CSS定位2移位柱子

Question

首先是有一個關於定位元素的好教程，它可以解釋發生了什麼。我已經閱讀過多篇文章，但無法掌握它。

我有特定的問題如下：

我有一個頭的div-元件（紅色）與下方2列（白色和綠色）。通常用float：left;我可以將元素放在彼此旁邊。但是現在我想要一個（白色的）在所示的標題區域上移動一點。

相對定位與負的最高值我可以得到白色在正確的位置，但如何定位第二列。調整瀏覽器大小時，它會變得混亂。

#Column1 
{ 
    float: left; 
    position: relative; 
    top: -140px; 
    background-color: #FFFFFF; 
    left: 70px; 
    width: 280px; 
    min-height: 500px; 
    padding: 10px; 
} 

#Column2 
{ 
    float: left; 
    width: 800px; 
    background-color: #00FF00; 
} 

Answer 1

這裏是JSFiddle演示你的佈局，而無需使用位置絕對浮動。 根據我的經驗，絕對位置更靈活，並且適用於這種佈局，特別是當您想要使用頂部，右側，底部和左側的碼頭元素時。 有些情況下，您需要使用浮動備用，但在這種情況下不需要。

使用浮動物來浮動它周圍的東西，並將絕對位置放置在物體上。

的HTML

<div id="Header">header</div> 
<div id="Column1">Left</div> 
<div id="Column2">Right</div> 

的CSS

#Header { 
    background-color: red; 
    height: 200px; 
} 
#Column1 { 
    position: relative; 
    background-color: #FFFFFF; 
    top: -140px; left: 70px; 
    width: 280px; 
    min-height: 500px; 
} 
#Column2 { 
    position: absolute; 
    background-color: #00FF00; 
    left: 350px; top: 200px; right: 0; 
    min-height: 360px; 
}​ 

更新刪除顯示：沒有從更多類在JSFiddle並看到容器靈活以及。

Answer 2

我只是要spitball這裏：

HTML

<div id="red"></div> 
<div id="white"></div> 
<div id="green"></div> 

CSS

#red { 
    width: 100%; 
    float: left; 
    height: 100px; 
    position: relative; 
    background-color: #f00; 
} 
#white { 
    width: 20%; 
    float: left; 
    margin-left: 4%; 
    margin-top: -40px; 
    position: relative; 
    background-color: #fff; 
    height: 400px; 
} 
#green { 
    width: 76%; 
    float: left; 
    position: relative; 
    background-color: #0f0; 
    height: 400px; 
} 

是否行得通？

Answer 3

你可以只使用負保證金

http://jsfiddle.net/gAKAK/

Answer 4

這是一種複雜的請求，所以不要覺得你不能弄清楚。您不必爲此解決方案設置width以外的其他任何內容;我的解決方案依靠不常用的overflow: hidden來實現這一點。

http://jsfiddle.net/Wexcode/uBQEu/

HTML：

<div id="header"></div> 
<div id="white"></div> 
<div id="green"></div> 

CSS：

#header { 
    background: red; 
    height: 70px; 
    border: 1px solid #000; } 
#white { 
    background: #fff; 
    float: left; 
    margin: -30px 0 0 70px; 
    width: 100px; 
    height: 230px; 
    border: 1px solid #000; } 
#green { 
    background: green; 
    overflow: hidden; 
    height: 201px; 
    border: 1px solid #000; 
    border-top: 0; 
    border-left: 0; }