CSS屬性在div嵌套

Question

不適用我試圖創建一個<div>，坐在這樣

兩個容器內的<div>應該有height給他們一個很好的量，由於某種原因，當我把<div>在<div>之內，它打破了height以及其他一些CSS屬性，因此所有的東西都看起來很扁平。

是#masthead_topbar是否繼承父項<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; \t 
 
    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 ;之間的空間是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 ; 
} 

Answer 2

你有一對夫婦的錯誤，如：

• 不使用border-color#在長度如600 px
• 的空間（可以使用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>