html - CSS 属性不适用于嵌套的 div

Question

我正在尝试创建一个 <div>在 <div> 内像这样坐

两个容器都应该有相当数量的 height对他们来说，出于某种原因，当我把 <div>在 <div> 内它打破了 height和其他一些 CSS 属性，所以一切最终看起来都被压扁了。

是#masthead_topbar从 parent 那里继承一些东西<div>还是我需要更改其他内容？

代码:

#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 ;

}

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

Answer 1

你有几个错误，例如:

• 一个空格，例如 600 px
• 不要在border-color中使用#(可以使用border简写)

请注意:

• 不要在 px 长度中使用小数值。
• 不要使用font，它已被弃用。

这是一个工作示例:

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

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