首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >收缩包装/收缩以适应css中回流的浮动div

收缩包装/收缩以适应css中回流的浮动div
EN

Stack Overflow用户
提问于 2011-10-02 13:04:27
回答 4查看 4.3K关注 0票数 16

http://jsfiddle.net/zEcn3/12/

我正在尝试获得一个div content,它可以调整到一行中可以容纳的div的数量。因此,当窗口比所有item div的总和都大,因此它们都在一行中时,该示例工作得很好,但是当窗口调整得更小,以便其中一个item回流到下一行时,content div的宽度是100%,而不是收缩包装。

我想要这样做的原因是,我可以让内容居中,在内容上方有一个菜单栏,缩小到组合回流内容的大小。

HTML:

代码语言:javascript
复制
<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:

代码语言:javascript
复制
.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;
}
EN

回答 4

Stack Overflow用户

发布于 2011-10-03 14:48:58

一位朋友帮我想出来了,答案是使用媒体查询。

代码语言:javascript
复制
@media (max-width: 1080px) {
    #main {
        max-width: 640px;
    }
}

因此,我在每个项目div的宽度间隔进行设置,因此当查看窗口小于某个数字时,它会将容器的宽度设置为下一层。

票数 2
EN

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/

票数 1
EN

Stack Overflow用户

发布于 2013-08-22 04:26:00

我在这里找到了答案:http://haslayout.net/css-tuts/CSS-Shrink-Wrap

它基本上等同于对您想要收缩以适应其内容的块元素使用display: inline-block;

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/7624718

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档