Question

我已经搜索过这个问题，但找不到答案。

我有一个文件，我在“移动”上有1列，在“平板电脑”上有2列，我想在“桌面”上有3列，或者大于1100px的任何内容。

我尝试过一堆不同的nth-child值。它的工作范围是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媒体查询中添加/更改以下属性：

$container->getParameter()

您的代码存在以下问题：

您有奇数列清除，三列布局不需要
您的保证金设定为1.5％。因此，每个li的组合宽度为34.3333％，太宽而不能容纳三排。
每个li都有1px边框，因此即使总宽度为33.3333％，边距为1％，1px边框也会将第三个项目推送到下一行。 @media (min-width: 1100px) { .image-grid li { margin: 1%; box-sizing: border-box; } .image-grid li:nth-child(odd) { clear: none; } }包含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。

nth-child值和2 col到3 col

3 个答案: