收缩包装/缩小到适合一个div，以回流浮动的div在css [英] Shrink-wrap / Shrink-to-fit a div to reflowed floated divs in css

问题描述

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

我试图获得一个 div 内容，调整为 div s。因此，当窗口大于所有项 div 的组合时，示例工作正常，因此它们都在行，但是当窗口缩小，以使项中的一个回流到下一行时， content div 的宽度为100％，而不是收缩包装。

I'm trying to get a div content that resizes to the number of divs that fit in a line. So the example works fine when the window is bigger than all the item divs combined so they're all in a row, but when the window is resized smaller so one of the items is reflowed to the next row, the content div's width is 100% instead of shrink wrapped.

我想要的原因是我可以使用菜单栏上方的内容缩小到合并的回流内容的大小。

The reason I want this is so I can have centered content with a menu bar above the content that shrinks to the size of the combined reflowed content.

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

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

推荐答案

我，答案是使用媒体查询。

A friend figured it out for me, the answer is to use media queries.

@media (max-width: 1080px) {
    #main {
        max-width: 640px;
    }
}

所以我以每个宽度的间隔项目div，因此当查看窗口小于某个数字时，它会将容器的宽度设置为下一级。

So I set at the intervals of the width of each item div, so when the viewing window is smaller than a certain number, it sets the width of the container to the next level down.

这篇关于收缩包装/缩小到适合一个div，以回流浮动的div在css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！