nth-child 值和 2 col 到 3 col答案

【问题标题】：nth-child values and 2 col to 3 colnth-child 值和 2 col 到 3 col
【发布时间】：2015-11-23 11:04:38
【问题描述】：

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

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

我尝试了一堆不同的 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 -->

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

因为你从来没有重写这条规则：

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

所以第三项是清除双方。

【讨论】：

嗯，那也没用。这是我的 sn-p：jsfiddle.net/whyhellothere/k5t3dawd/embedded/result
看了Josh的sn-p后，我现在明白你的意思了。谢谢！只是要清楚： clear:both 意味着第三列将进入下一行。而且我的利润太大，这也将我的内容推低了。对吗？

【解决方案2】：

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

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

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

您的代码存在以下问题：

您需要清除奇数列，而三列布局不需要这样做
您的保证金设置为 1.5%。因此，每个 li 的组合宽度为 34.3333%，太宽，无法在一行中放置三个。
每个 li 都有一个 1px 的边框，因此即使在 33.3333% 的总宽度中使用 1% 的边距，1px 的边框也会将第三个项目推到下一行。 box-sizing: border-box 在 li 的宽度中包含边框，因此该元素真正是 33.3333% 宽度。

【讨论】：

您确定您添加的属性正确吗？我刚刚测试过，这很有效。
发给我一个sn-p？我尝试了你和@stephenbolton 的解决方案，但都没有奏效。说清楚，这是我的代码：@media (min-width: 1100px) { body { background: green; } .image-grid p { font-size: 1.3rem; } .image-grid li { float: left; width: 33.3333%; margin: 1%; background: bisque; } .image-grid li:nth-child(odd) { clear: both; } .image-grid { border: 1px solid yellow; } }
这是我的更改的一个工作小提琴：jsfiddle.net/zb8w2yft 只需调整窗口大小，以便 1100px 媒体查询生效。
谢谢乔希。那行得通。虽然，我能够删除“nth-child(4)”，它仍然有 3 列。我做错了什么？
对于这个特定的布局，真的没有必要使用 :nth-child 。由于这些项目都是 33.3333% 的固定宽度并且向左浮动，因此每隔四个项目将自动“清除”到下一行，因为上一行没有可用空间。它们的关键是边距和框大小，允许三个元素放在一行上。

【解决方案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 有所帮助。

【讨论】：