向右浮動div？

我有一個簡單的問題，但看起來我並不那麼聰明：/而且我也有點急！我通過其他答案，並嘗試了幾個選項，我找不到解決方案。我很抱歉，如果這是微不足道的，我是一個noob ...向右浮動div？

描述：這是一個左對齊的網站。鏈接在這裏：http://goo.gl/LrzYy7

我有一個DIV（id =「leftwrap」）在左邊，一個DIV（id =「content」）漂浮在它的右邊。在「Leftwrap」中，我有兩個DIV在另一個之上。底部的一個（id =「header_bottom」）具有「高度：100vm」，以便根據「內容」DIV中的內容進行擴展。至少這是主意。

但是...由於某種原因，它只是...延伸到任何高度，它感覺很好。或類似的東西：/

這是HTML：

<body> 
<div id="mainwrap"> 
<div id="leftwrap"> 
<div id="header"><img src="img/leftbar.jpg" width="270" height="929" alt="Left Column" /></div> 
<div id="header_bottom"></div> 
</div> 

<div id="content"><img src="img/rightcontent.jpg" width="675" height="770" alt="Right Content" /></div> 
</div> 
</body>

，這是CSS

body, div, img {margin:0; padding:0; } 
body { 
    position: absolute; 
    top: 0; 
    left: 0; 
    background: #f0f0f0; 
} 

/*MAIN DIVS AND CONTENT*/ 
#mainwrap { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 945px; 
} 
#leftwrap { 
    width: 270px; 
    float: left; 
} 
#header {  
    width: 270px; 
    height: 929px; 
} 
#header_bottom { 
    width: 270px; 
    height:100vh; 
    background: #d8991c; 
} 

#content 
{ 
    position: absolute; 
    top: 0; 
    left: 270px; 
    float: right; 
}

我知道它有點亂（我敢打賭，它可以編碼簡單，但我有困難時期使其正確地浮動）。

由於未指定高度或其他因素，是否有問題？

感謝

在你的HTML

來源

2014-10-03 Grinder

沒有人天生聰明！ – 2014-10-03 23:17:01

提示：除非你知道'position：absolute'是如何工作的以及你需要使用它的情況，否則我建議你完全避免它。 – 2014-10-03 23:17:04

嘗試添加css屬性'display：block' – John 2014-10-03 23:19:47

，這樣做：

<div id="mainwrap"> 
<div id="leftwrap"> 
<div id="header"><img src="img/leftbar.jpg" alt="Left Column" /></div> 
<div id="header_bottom"></div> 
</div> 

<div id="content"><img src="img/rightcontent.jpg" alt="Right Content" /></div> 
</div>

基本上，刪除內嵌樣式。除非你被迫，否則不要再使用它們。即便如此，儘可能抵制衝動。現在

，在你的CSS：

body, div, img { 
    margin:0; 
    padding:0; 
} 
body { 
    top: 0; 
    left: 0; 
    background: #f0f0f0; 
} 
/*MAIN DIVS AND CONTENT*/ 
#mainwrap { 
    top: 0; 
    left: 0; 
    width: 945px; 
} 
#leftwrap { 
    width: 270px; 
    float: left; 
} 
#header { 
    width: 270px; 
    height: 929px; 
} 
#header_bottom { 
    width: 270px; 
    background: #d8991c; 
} 
#content { 
    top: 0; 
    left: 270px; 
    float: right; 
}

基本上，刪除您position:absolute聲明。 除非你被迫，否則不要再使用它們。儘管如此，儘可能抵制衝動（好的，這次它是誇張的，但真的，100次人中有99人使用絕對定位，這是錯誤的，並導致佈局問題）

無論哪種方式，在你的特殊情況下，你的問題是隨機添加的100vh。我想你不知道它是什麼意思，但爲了以防萬一，它被錯誤地使用了，它正在按照你的要求去做：做到100％高度的viewport，從而導致佈局的高度增加一倍

來源

2014-10-03 23:33:33 Devin

CSS還有一個稱爲z-index的功能，它可以在網頁上啓用圖層。例如一個0的z-索引將在層堆棧中的頁面的最底部，並且5的z-索引將是第5層並且將是最高的。 z-index可以根據需要啓用盡可能多的圖層。下面是一個沒有HTML的例子。

Div.Class1 {z-index: 0;} 
Div.Class2 {z-index: 1;} 
Div.Class3 {z-index: 2;}

因此，在這種小例如具有Class 1的一個ID的DIV將在底部和與等級2的ID在div將在Class1的DIV的前部和最後的Class3的事業部將是對的頂部所有其他人。

來源

2014-10-03 23:42:22 Brennan

除了上面：我已經簡化HTML和CSS：

<body> 
<div id="mainwrap"> 

<div id="header"><img src="img/leftbar.jpg" width="270" height="929" alt="Left Column" /></div> 
<div id="content"> 
<img src="img/rightcontent.jpg" width="675" height="770" alt="Right Column" /><br /> 
<img src="img/rightcontent.jpg" width="675" height="770" alt="Right Column Copy" /> 
</div> 

</div> 
</body>

和CSS：

/*GENERAL STUFF*/ 

html, body {height: 100%;} 
body, div, img {margin:0; padding:0; background: #f0f0f0;} 

/*MAIN DIVS AND CONTENT*/ 

#mainwrap { 
    width: 945px; 
} 

#header {  
    width: 270px; 
    height: 100%; 
    float:left; 
    background: #d8991c; /*bg-color that will create seamless extention the left DIV one height:100% will work*/ 
} 

#content 
{ 
    width: 675px; 
    float: right; 
}

這裏是網站：我的網站http://goo.gl/LrzYy7

所以更新如何以所有神聖的名義，讓我的左DIV始終保持100％的高度，無論有多少內容？我試着約10個選項我在網絡上找到的，沒有工作：//

請... helppp。謝謝！！

來源

2014-10-04 09:57:49 Grinder

向右浮動div？

回答

相關問題