In the following code, how to make "#wrap" width fit its childs width, and not to limit to browser window bounds ?

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

HTML

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

JSFIDDLE

https://jsfiddle.net/67egnpho/1/

4 个解决方案

#1

The childs width is 100% so currently it is fitting it.

childs的宽度是100%，所以目前它是合适的。

Adding display: inline-block; will keep it inline with it's contents.

添加显示:inline-block;将它与它的内容保持一致。

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

#2

The <div> element is block level by default, it occupies the entire space of its parent container, which is <body> in this case.

元素默认为块级，它占用其父容器的整个空间，在本例中为。

You can set to #wrap {display: inline-block;} or #wrap {display: table;} so that it will be flowed with surrounding content.

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

One other way is using #wrap {width: fit-content;), see support tables.

另一种方法是使用#wrap {width: fit-content;)，参见支持表。

#3

Either inline or inline-block if you want wrap to act like a block itself.

如果想要换行，可以使用内联或内联块。

HTML :

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

#4

-1

Is this what you are looking for?

这就是你要找的吗?

Adding:

添加:

position: absolute;

to the parent and floating the children will make the parent stretch to fit the children.

对父母和浮动的孩子将使父母伸展适合孩子。

#1