如何将这些div彼此堆叠？
[英]How do I stack these divs on top of each other?
问题描述
I have searched all over Stackoverflow and no solution has worked so far. 
我在Stackoverflow上进行了全面搜索，到目前为止，还没有解决方案。 I need a quick tip or help in order to figure out how would I go about stacking the div id "top_section" on the of the div id "middle_section". 我需要快速提示或帮助，以便弄清楚如何将div id“ top_section”堆叠在div id“ middle_section”的上。 right now "middle_section" is on top of "top_section" when it should really be at the bottom right right where "top_section" ends is where "middle_section" should begin. 现在，“ middle_section”应该位于“ top_section”的顶部，而实际上它应该位于“ top_section”结束处的右下角，即“ middle_section”应该开始的位置。
Heres the HTML 继承人的HTML
<!DOCTYPE html>
<html>
</head>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="wrapper">
<div id="top_section">
<div class="content_wrapper">
<section id="td_left">
<h1>XYZ</h1>
</section>
<section id="td_right"></section>
</div>
</div>
<div id="middle_section">
<div class="content_wrapper">
<h1>Stuff</h1>
</div>
</div>
<div id="bottom_section"></div>
</div>
Heres the CSS: 这是CSS：
.content_wrapper {
width: 1100px;
margin: 0 auto;
background: red; }
header {
background: blue; }
header img {
width: 14%;
margin: 0 auto 0 auto; }
.sections, #top_section, #middle_section {
width: 100%;
position: absolute;
float: left; }
#top_section {
height: 80.3%;
background: #34495D; }
#middle_section {
height: 70.3%;
background: #21303F; }
3 个解决方案
解决方案1
0 2015-02-03 09:08:46
change 更改
.sections, #top_section, #middle_section {
width: 100%;
position: absolute;
float: left;
}
to 至
.sections, #top_section, #middle_section {
width: 100%;
position: relative;
display: block;
clear: both
}
解决方案2
0 2015-02-03 09:12:32
Use "top" to define where the section should start. 使用“顶部”定义该部分的开始位置。 Dont forget the height of your section have to be 100% or less if you add them to each other. 如果将它们彼此添加，请不要忘记您的部分的高度必须为100％或更小。
#top_section {
top: 0%
height: 20%;
background: #34495D; }
#middle_section {
top: 20%;
height: 80%;
background: #21303F; }
解决方案3
0 2015-02-03 09:12:33
You only need to get rid of your position: absolute . 您只需要摆脱自己的position: absolute 。
So your code would have 所以你的代码将有
sections, #top_section, #middle_section {
width: 100%;
float: left; }
instead of 代替
.sections, #top_section, #middle_section {
width: 100%;
position: absolute;
float: left;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.