创建嵌套Div

Question

我在创建嵌入式div时遇到了问题，就像在附加的图像中一样。 Image

如果有人能告诉我如何，我很乐意。

＆＃13;

＆＃13;

  .demo-container {
    padding: 30px;
    border: 1px solid #e2e4e7;
    background-color: #f5f7f8;
    text-align: left;
    display: inline-block;
    vertical-align: top;
  }
  .header {
    display: block;
    padding: 15px 25px 0;
    overflow: hidden;
  }

＆＃13;

<div id="warp">
  <div class="header">
    New Alerts
  </div>

  <div class="demo-container">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要将height和width设置为您的父#wrap，请参阅下面的完整摘要：

段

＆＃13;

＆＃13;

* {
  box-sizing: border-box
}
#wrap {
  height: 200px;
  width: 200px;
  text-align: center;   
}
.header {
  display: block;
  padding: 15px 25px;
  background: blue;
  color: white;
}
.demo-container {
  width: 100%;
  padding: 30px;
  border: 1px solid #e2e4e7;
  background-color: #f5f7f8;
  display: inline-block;
  vertical-align: middle;
  color:black;
}

＆＃13;

<div id="wrap">
  <div class="header">
    New Alerts
  </div>
  <div class="demo-container">
    X Alerts
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;