Question

我想在我的“main”div中包含我的“content”div和“sidebar”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 -->

Answer 1

这应该有用。

特别是display:inline-block;很重要。 box-sizing:border-box是一个很好的解决方案，让它显示得很好。 padidng包含在div的总宽度和高度中。

#main {
  display: inline-block;
  box-sizing: border-box;
  background-color: #fff;
  width: 100%;
  padding: 20px;
}

Answer 2

尝试删除 float:left，并添加 display:inline-block到content div。

的css

Div不包括儿童

2 个答案: