HTML

Question

在下面的代码中，如何使“#wrap”宽度适合其子宽度，而不是限制浏览器窗口界限？

<div id="wrap">WRAP
    <div id="menu">MENU</div>
    <div id="large-content">LARGE CONTENT</div>
</div>

CSS

#wrap{background: #eee;}
#large-content{background: #f1c40f; width: 1000px; height: 300px}
#menu{background: #2c3e50; width: 100%; height: 50px}

Answer 1

孩子的宽度是100％所以目前适合它。

添加display: inline-block;会使其与内容保持一致。

#wrap{background: #eee; display: inline-block;}

Answer 2

<div>元素默认为块级别，它占用其父容器的整个空间，在这种情况下为<body>。

您可以设置为#wrap {display: inline-block;}或#wrap {display: table;}，以便它与周围的内容一起流动。

另一种方法是使用#wrap {width: fit-content;)，请参阅support tables。

Answer 3

如果你想让wrap就像块本身那样行内联或内联块。

HTML：

<div id="wrap">WRAP
   <div id="menu">MENU</div>
   <div id="large-content">LARGE CONTENT</div>
</div>

CSS：

#wrap{background: #eee;display: inline-block;} 
or   
#wrap{background: #eee;display: inline-block;}

Answer 4

this您要找的是什么？

添加：

position: absolute;

到父母并且浮动孩子将使父母伸展以适合孩子。