向右浮动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？

回答

相关问题