Question

我想要完成的是：在将浏览器最小化到特定宽度（600px）之后，停止css规则： display：inline-block 使我的容器盒变为1列。我希望它留在2列。

附加说明：我使用的是jQuery插件：Mixitup。

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

我尝试过做什么：使用 CSS规则@media all（max-width：600px） 我试过搞乱 显示：“值” ，但没有好处。我认为答案将是一个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是补偿内联元素的额外余量（空白区域）。您可以在此处详细了解：https://css-tricks.com/fighting-the-space-between-inline-block-elements/

示例2：如果您不想使用内联块黑客，请使用浮动。额外box-sizing: border-box;用于制作我为可见度添加的临时边框，以保持在box宽度/高度

Flex当然是第三种方式（虽然这里没有样本）。

使用内联块：

＆＃13;

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

＆＃13;

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

＆＃13;

使用浮动：

＆＃13;

#container, .box {
    box-sizing: border-box; 
}

#container {
    min-width: 400px;   
}

.box {
    width:200px;
    height:200px;
    background:black;
    float:left;
    border: 1px solid #ccc;
}

＆＃13;

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

＆＃13;

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/

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

2 个答案: