我有一个简单的问题，但似乎我不是那么聪明:/而且我也有点匆忙! 我浏览了其他答案并尝试了几种选择，但我找不到解决方案。如果这是微不足道的，我深表歉意，我是菜鸟...
描述: 这是一个左对齐的网站。链接在这里:http://goo.gl/LrzYy7
我有一个 DIV (id="leftwrap") 在左边，另一个 DIV (id="content") 漂浮在它的右边。在“Leftwrap”中，我有两个 DIV 相互重叠。底部的 (id="header_bottom") 具有“height:100vm”，因此它会根据“Content”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;
}
我知道它有点乱(我打赌它的编码可以更简单，但我很难让它正确 float )。
是不是没有指定高度之类的问题？
谢谢
最佳答案
在您的 HTML 中，执行此操作:
<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。我想你不知道它是什么意思，但为了以防万一，它被错误地使用了，它完全按照你告诉它的去做:拥有 viewport 的 100% 高度。 , 从而导致布局的高度加倍
关于html - 向右浮动div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26187979/