收缩包装/收缩以适应css中回流的浮动div
我正在尝试获得一个div content，它可以调整到一行中可以容纳的div的数量。因此，当窗口比所有item div的总和都大，因此它们都在一行中时，该示例工作得很好，但是当窗口调整得更小，以便其中一个item回流到下一行时，content div的宽度是100%，而不是收缩包装。
我想要这样做的原因是，我可以让内容居中，在内容上方有一个菜单栏，缩小到组合回流内容的大小。
HTML：
<div class="wrapper">
<div class="content">
<div class="item">Hello.</div>
<div class="item">Hello.</div>
<div class="item">Hello.</div>
<div class="item">Hello.</div>
<div class="item">Hello.</div>
</div>
</div>CSS：
.item {
float: left;
width: 70px;
border: 1px solid black;
}
.content {
display: inline-block;
border: 1px solid black;
}
.content:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}回答 4
Stack Overflow用户
发布于 2011-10-03 14:48:58
一位朋友帮我想出来了，答案是使用媒体查询。
@media (max-width: 1080px) {
#main {
max-width: 640px;
}
}因此，我在每个项目div的宽度间隔进行设置，因此当查看窗口小于某个数字时，它会将容器的宽度设置为下一层。
Stack Overflow用户
发布于 2011-11-07 03:02:47
我不太确定你是想去掉容器上的100%宽度，还是让容器随着内容一起缩小，这取决于屏幕的大小。
在我看来，问题是当我缩小屏幕时，右边的最后一个"Hello“被下推到下一行。
所以我所做的就是将包装器的宽度设置为100%。然后，我将固定宽度从项目中删除，并将其更改为% width。在本例中，我将框的数量划分为100%，即每个框为20% (但使用1px的边界，我将每个框减少到19% )。另外，我在id="content"中添加了display:block; margin-left:auto; margin-right:auto;。
这是到JS Fiddle的链接：http://jsfiddle.net/rm2773/Lq7H7/
Stack Overflow用户
发布于 2013-08-22 04:26:00
我在这里找到了答案：http://haslayout.net/css-tuts/CSS-Shrink-Wrap
它基本上等同于对您想要收缩以适应其内容的块元素使用display: inline-block;。
https://stackoverflow.com/questions/7624718
复制相似问题
腾讯云开发者
