第n个孩子的价值观和2列到3山坳

Question

我搜索过这个问题，但无法找到答案。

我有一个文件，其中我对“移动”和2列的“平板电脑”一米栏，我想“桌面”，或任何比1100px大上3列。

我已经尝试了一堆不同的第n个孩子的值。它从1到2，但不是2到3.我无法弄清楚。谢谢！

/*Grid ------------------*/ 
 

 
/* Max out, center */ 
 

 
.image-grid { 
 
    max-width: 1600px; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
.image-grid li { 
 
    float: left; 
 
    width: 47%; 
 
    margin: 1.5%; 
 
    text-align: center; 
 
} 
 
.image-grid p { 
 
    margin: 0; 
 
    padding: 2% 0 5% 0; 
 
    color: black; 
 
    font-size: 1.15rem; 
 
    font-weight: 400; 
 
} 
 
.image-grid:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 
.image-grid li:nth-child(odd) { 
 
    clear: both; 
 
} 
 
img { 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 
/*Breaks ------------------*/ 
 

 
@media (max-width: 640px) { 
 
    * { 
 
    margin: 0; 
 
    padding: 0; 
 
    } 
 
    .image-grid ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    } 
 
    .image-grid li { 
 
    float: none; 
 
    width: auto; 
 
    padding: 0 0 4%; 
 
    } 
 
    .image-grid li a p { 
 
    font-size: 1.65rem; 
 
    } 
 
} 
 
@media (min-width: 1100px) { 
 
    body { 
 
    background: green; 
 
    } 
 
    .image-grid p { 
 
    font-size: 1.3rem; 
 
    } 
 
    .image-grid li { 
 
    float: left; 
 
    width: 31.3333%; 
 
    margin: 1.5%; 
 
    border: 1px solid white; 
 
    } 
 
    .image-grid li:nth-child(4) { 
 
    clear: right; 
 
    background: aqua; 
 
    } 
 
    .image-grid { 
 
    border: 1px solid yellow; 
 
    } 
 
}

<div class="wrapper"> 
 
    <div> 
 
    <ul class="image-grid"> 
 
     <li> 
 
     <a href="http://jonschafer.com/portfolio/logos.html"> 
 
      <img src="http://jonschafer.com/gfx/-main/gfx-main_0007_WHT_web_logos-06.jpg" alt="" /> 
 
      <p><a href="http://jonschafer.com/portfolio/logos.html">Logos</a> 
 
      </p> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="http://jonschafer.com/portfolio/akqa.html"> 
 
      <img src="http://jonschafer.com/gfx/-main/gfx-main_0011_WHT_web_AKQA-MAIN.jpg" alt="" /> 
 
      <p><a href="http://jonschafer.com/portfolio/akqa.html">AKQA</a> 
 
      </p> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="http://jonschafer.com/portfolio/nike2021.html"> 
 
      <img src="http://jonschafer.com/gfx/-main/gfx-main_0004_WHT_web_Nike2021_8.jpg" alt="" /> 
 
      <p><a href="http://jonschafer.com/portfolio/nike2021.html">Nike 2021</a> 
 
      </p> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="http://jonschafer.com/portfolio/gimme5.html"> 
 
      <img src="http://jonschafer.com/gfx/-main/gfx-main_0009_WHT_web_Gimme5-02.jpg" alt="" /> 
 
      <p><a href="http://jonschafer.com/portfolio/gimme5.html">Walnut's Gimme 5</a> 
 
      </p> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="http://jonschafer.com/portfolio/xbox.html"> 
 
      <img src="http://jonschafer.com/gfx/-main/gfx-main_0000_WHT_web_Halo-03.jpg" alt="" /> 
 
      <p><a href="http://jonschafer.com/portfolio/xbox.html">Xbox Master Chief Collection</a> 
 
      </p> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="http://jonschafer.com/portfolio/opolis.html"> 
 
      <img src="http://jonschafer.com/gfx/-main/gfx-main_0003_WHT_web_Opolis-13.jpg" alt="" /> 
 
      <p><a href="http://jonschafer.com/portfolio/opolis.html">Opolis Design</a> 
 
      </p> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="http://jonschafer.com/portfolio/votesolar.html"> 
 
      <img src="http://jonschafer.com/gfx/-main/gfx-main_0002_WHT_web_VoteSolar-05.jpg" alt="" /> 
 
      <p><a href="http://jonschafer.com/portfolio/votesolar.html">Vote Solar</a> 
 
      </p> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="http://jonschafer.com/portfolio/nikeevents.html"> 
 
      <img src="http://jonschafer.com/gfx/-main/gfx-main_0005_WHT_web_Nike-Sales-Rec_1_0.jpg" alt="" /> 
 
      <p><a href="http://jonschafer.com/portfolio/nikeevents.html">Nike Sales Events</a> 
 
      </p> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="http://jonschafer.com/portfolio/classicben.html"> 
 
      <img src="http://jonschafer.com/gfx/-main/gfx-main_0010_WHT_web_Classic-Ben-05.jpg" alt="" /> 
 
      <p><a href="http://jonschafer.com/portfolio/classicben.html">Classic Ben</a> 
 
      </p> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="http://jonschafer.com/portfolio/medigap.html"> 
 
      <img src="http://jonschafer.com/gfx/-main/gfx-main_0006_Medigap-N1_Who-is-AC.jpg" alt="" /> 
 
      <p><a href="http://jonschafer.com/portfolio/medigap.html">AllCare Medigap</a> 
 
      </p> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="http://jonschafer.com/portfolio/levi.html"> 
 
      <img src="http://jonschafer.com/gfx/-main/gfx-main_0008_WHT_web_Levi-06.jpg" alt="" /> 
 
      <p><a href="http://jonschafer.com/portfolio/levi.html">Levi</a> 
 
      </p> 
 
     </a> 
 
     </li> 
 

 
    </ul> 
 
    <!-- End group --> 
 
    </div> 
 
</div> 
 
<!-- End wrapper -->

Answer 1

添加/ 1100px媒体查询中更改以下属性：

@media (min-width: 1100px) { 
    .image-grid li { 
     margin: 1%; 
     box-sizing: border-box; 
    } 

    .image-grid li:nth-child(odd) { 
     clear: none; 
    } 
} 

与您的代码的问题是：

1. 你有奇数列清，这对于三列布局
来说是不需要的
2. 您的保证金设置为1.5％。所以每一个里面的总宽度是34.3333％，太宽了，不足以适合三排。
3. 每个L1具有像素边框，因此，即使与33.3333％的总宽度的1页％边距，1px的边界将推动第三项到下一行。 box-sizing: border-box在li的宽度中包含边框，因此该元素的真实宽度为33.3333％。

Answer 2

它，因为你永远改写这个规则：

.image-grid li:nth-child(odd) { clear: both; }

所以第三项是清除两侧。

Answer 3

这工作对我来说：

@media (min-width: 1100px) { 
    /*keep all others*/ 

    /**remove this one 
    .image-grid li:nth-child(2n+1) { 
     clear: both; 
    } 
    */ 

    /* modify this one*/ 
    .image-grid li { 
    float: left; 
    width: 31.3333%; 
    margin: 1%; /* Change from 1.5% */ 
    border: 1px solid white; 
    box-sizing: border-box; /*Added this line*/ 
    } 

希望它可以帮助T04435。