显示：内联块，最小化到一定宽度后，停止内联块并保持结构不变

Question

我要完成的工作是：将浏览器最小化到一定宽度（在小提琴的情况下为600px）后，停止css规则： display：inline-block使我的容器框变成1列。 我希望它保持在2列。

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

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

---

我尝试做的事情：使用CSS规则@media all（最大宽度：600px），我尝试弄乱显示内容：“ 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：404像素中的额外4个用于弥补行内元素的额外余量（空白）。 您可以在这里阅读有关此内容的更多信息： https : //css-tricks.com/fighting-the-space-between-inline-block-elements/

样本2：如果您不想使用内联块hack，请使用float。 额外的box-sizing: border-box; 用于使我添加的可见性临时边框保持在box宽度/高度之内

Flex当然是第三种方式（尽管这里/目前还没有示例）。

使用内联块：

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

使用浮点数：

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

Answer 2

您可能想尝试使用浮点数而不是内联块。 这样，您可以将每个元素1st，3rd，5th等定位为目标，以开始一个清晰的新“行”。 这是CSS的示例：

.box{
width:200px;
height:200px;
background:black;
margin-right: 4px; /*or whatever you want; this is your spacing*/
margin-bottom: 4px;
float: left;

}

@media all and (max-width:600px)
{
 .box:nth-child(2n+1) {
  clear: left; 
   background:red; /*I put this here just so you could see which one...*/
   /*...is getting the clear. Get rid of it when ready. */ 
 }

}

https://jsfiddle.net/326bby8x/