我在创建嵌入式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;
答案 0 :(得分:0)
您需要将height
和width
设置为您的父#wrap
,请参阅下面的完整摘要:
* {
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;