父div不是與子div相同的寬度

Question

如果我有一個家長<div>沒有指定寬度，並且孩子<div>指定了固定寬度，並且窗口小於固定寬度... CSS /父親<div>中的HTML結果只是窗口的寬度而不是孩子的固定寬度？

使用下面的片段中，家長有紅色的背景顏色......而孩子比它生活在窗口的方式做大。

如果您運行的片段，並滾動窗口向右，你會發現父母的紅色背景只與窗口本身一樣寬，儘管孩子比較大。

#parent { 
 
    background-color:red; 
 
} 
 
#child { 
 
    width:1000px; 
 
}

<div id="parent"><div id="child">Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world</div></div>

是否有這意味着，父母必須是至少的尺寸與孩子一樣，不喜歡的東西min-width:1000px

Answer 1

中明確設定大小通過一個簡單的CSS命令默認div元素有display: block，所以它們的寬度等於其父文件的寬度，或者在這種情況下爲body或html。

但是，如果你設置display到inline-block#parent元素現在該元素將有寬度相同，其內容的寬度或最大的子元素在這種情況下，它#child元素。

#parent { 
 
    background-color:red; 
 
    display: inline-block; 
 
} 
 
#child { 
 
    width:1000px; 
 
}

<div id="parent"><div id="child">Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world</div></div>

Answer 2

這可能是你正在尋找的解決方案：

#parent{ 
    background-color : red; 
    display : inline-block; 
} 
#child { 
    width:1000px; 
} 

，或者使用浮動：

#parent{ 
    background-color : red; 
    float: left; 
    clear: both; 
} 
#child { 
    width:1000px; 
} 

https://codepen.io/powaznypowazny/pen/eWYNZE