CSS属性不适用于嵌套div

Question

我试图在<div>内创建一个<div>，就像这样

两个容器都应该有大量的height，出于某种原因，当我将<div>放在<div>内时，它会打破height和一些其他CSS属性所以一切都看起来被压扁了。

#masthead_topbar是继承父<div>的内容还是需要更改其他内容？

守则：

＆＃13;

＆＃13;

#container {
  width: 951.8px ;
  height: 600 px ;
  background-color: #c2c2c2 ;
  border: solid 1px ;
  border-color: b8b8b8 ;
  margin: 0 auto ;
  display: flex ;
  align-items: center ;
}
#masthead_topbar {
  width: 929px ;
  min-height: 47.00 px ;
  max-height: 47.00 px ;  
  background-color: #c2c2c2 ;
  border: solid 1px ;
  border-color: b8b8b8 ;
  margin-left: 10px ; 
  margin-right: 10px;  	
  margin-top: 10px ;

}

＆＃13;

<div id="container">
  <!-- Start Masthead TopBar -->
  <div id="masthead_topbar">
    <font>Test</font>
    <!-- End Masthead_TopBar -->
  </div>
  <!-- End Container DIV -->
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你有几个错误，例如：

• 长度为600 px
的空格
• 未在#中使用border-color（您可以使用border简写）

请注意：

• 请勿在{{1​​}}长度中使用小数值。
• 请勿使用px，不推荐使用。

这是一个工作示例：

＆＃13;

＆＃13;

font

＆＃13;

.container {
  max-width: 950px; /* changed for demo */
  height: 150px; /* changed for demo */
  border: solid 1px #b8b8b8;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.masthead_topbar {
  width: 100%;
  border: solid 1px #b8b8b8;
  margin: 10px 10px 0;
  padding: 10px;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

好吧，你只需删除600 px ;之间的空格600px; :) 也许还需要修复其他一些事情（明星之间的代码** **编辑）：

#container {
  width: 951.8px ;
  **height: 600px ;**
  background-color: #c2c2c2 ;
  **border: 1px solid #b8b8b8 ;**
  **border-color: #b8b8b8 ;**
  margin: 0 auto ;
  display: flex ;
  align-items: center ;
}
#masthead_topbar {
  width: 929px ;
  **min-height: 47.00px ;
  max-height: 47.00px ;**  
  background-color: #c2c2c2 ;
  **border: 1px solid #b8b8b8 ;
  border-color: #b8b8b8 ;**
  margin-left: 10px ; 
  margin-right: 10px;   
  margin-top: 10px ;
}