[英]How do I stack these divs on top of each other?
我在Stackoverflow上进行了全面搜索,到目前为止,还没有解决方案。 我需要快速提示或帮助,以便弄清楚如何将div id“ top_section”堆叠在div id“ middle_section”的上。 现在,“ middle_section”应该位于“ top_section”的顶部,而实际上它应该位于“ top_section”结束处的右下角,即“ middle_section”应该开始的位置。
继承人的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>
这是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; }
更改
.sections, #top_section, #middle_section {
width: 100%;
position: absolute;
float: left;
}
至
.sections, #top_section, #middle_section {
width: 100%;
position: relative;
display: block;
clear: both
}
使用“顶部”定义该部分的开始位置。 如果将它们彼此添加,请不要忘记您的部分的高度必须为100%或更小。
#top_section {
top: 0%
height: 20%;
background: #34495D; }
#middle_section {
top: 20%;
height: 80%;
background: #21303F; }
您只需要摆脱自己的position: absolute
。
所以你的代码将有
sections, #top_section, #middle_section {
width: 100%;
float: left; }
代替
.sections, #top_section, #middle_section {
width: 100%;
position: absolute;
float: left;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.