javascript - 最小化到一定宽度后显示: inline-block,，停止inline-block，保持结构不变

Question

我想要完成的是:将浏览器最小化到一定宽度后，在我的 fiddle 案例中为 600px，停止 css 规则:display: inline-block 使我的容器框变成 1 列。我希望它保持在 2 列。

附加说明:我正在使用 jQuery 插件:Mixitup。

这是 jQuery 插件代码的示例，但不是我的代码，因为它比这大得多: http://codepen.io/jzhang172/pen/EVGNqj

---

我尝试做的事情:使用 CSS 规则 @media all (max-width:600px)我试过弄乱 display: "value"，但效果不佳。我认为答案将是一个 javascript 解决方案，但我不是 Javascript 专家。

Jsfiddle:http://jsfiddle.net/jzhang172/886mbLbq/

.box{
    width:200px;
    height:200px;
    background:black;
    display:inline-block;
    
}

@media all and (max-width:600px)
    {
     #container .box{
      display:block;   
     }
        
    }

<div id="container">
    
    
    
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    
</div>

Answer 1

要使它们不少于 2 列，请在容器上设置最小宽度。

示例1:404px中多出的4个是为了弥补行内元素额外的margin(空白)。您可以在此处阅读更多相关信息:https://css-tricks.com/fighting-the-space-between-inline-block-elements/

示例 2:如果您不想使用内联 block hack，请使用 float 。额外的 box-sizing: border-box; 是为了使我为可见性添加的临时边框保持在 box 宽度/高度内

Flex 当然是第三种方式(虽然/目前还没有这种方式的示例)。

使用内联 block :

#container {
    min-width: 404px;   
}

.box{
    width:200px;
    height:200px;
    background:black;
    display:inline-block;        
}

<div id="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>    
</div>

使用 float :

#container, .box {
    box-sizing: border-box; 
}

#container {
    min-width: 400px;   
}

.box {
    width:200px;
    height:200px;
    background:black;
    float:left;
    border: 1px solid #ccc;
}

<div id="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>    
</div>