我想在我的“主要”div 中包含我的“内容”div 和“侧边栏”div,但它不起作用。这里有什么问题?
如您所见,“标题”和“侧边栏”不在本应是主要 div 的白色区域中
body {
color:#333333;
background-color:#A6BFB3;
margin:0;
padding:0;
font-family: 'Open Sans', sans-serif;
width:100%;
height:100%;}
#wrapper {
width:960px;
margin: 0 auto;
background-color:#fff;
}
#header {
width:100%;
border-bottom: 5px solid #4A8520;
height: auto;
}
#header img {
width:100%;
}
#main {
background-color:#fff;
width:100%;
padding:20px;
}
#content {
width:70%;
float:left;
}
#sidebar {
width:25%;
float:right;
}
<div id="wrapper">
<header id="header">
<img src="http://kurkuma-kapseln.info/wp-content/uploads/2016/01/Header_Kurkuma_Kapseln.jpg">
</header>
<div id="main">
<div id="content">
<h1> Heading</h1>
</div>
<div id="sidebar">
sidebar
</div>
</div>
<!-- Ende Main -->
</div>
<!-- Ende Wrapper -->
最佳答案
这应该有效。
特别是 display:inline-block;
很重要。 box-sizing:border-box
是一个很好的解决方案,让它显示得很好。 padidng包含在div的总宽和总高中。
#main {
display: inline-block;
box-sizing: border-box;
background-color: #fff;
width: 100%;
padding: 20px;
}
关于html - Div 不覆盖子项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35971333/