创建嵌套Div

时间:2016-02-11 17:41:37

标签: html css asp.net html5 css3

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

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



  .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;
  }

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

  <div class="demo-container">
  </div>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

您需要将heightwidth设置为您的父#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;