html - 内容没有正确包装？

Question

我的作品集网站出现问题，内容未正确包装。对于大于 480 像素的宽度，它在三列 View 中看起来不错，但当它低于该值时，它会切换到两列布局/移动 View ，并且不再完全正确换行。

有那么大的空间，我正试图弄清楚如何纠正它。主页是唯一的问题。任何帮助将不胜感激!

HTML 骨架:

<div id="wrapper">
  <section>
    <ul id="gallery">
      <li></li>
    </ul>
  </section>
</wrapper>

相关 CSS:

#wrapper {
 overflow: auto;
 margin: 0 auto 100px auto;
 max-width: 940px;
 padding: 0 5%;
 }

#gallery {
 margin: 0;
 padding: 0;
 list-style: none;
 }

#gallery li {
 float: left;
 width: 45%;
 margin: 2.5%;
 background-color:  #f2f2f2;
 }

#gallery li a p {
 margin: 0;
 padding: 5%;
 font-size: 0.5em;
 color: #3b4145;
 }

Answer 1

移动版添加#gallery li:nth-child(odd) {clear: left;}，三列撤销。

---

你还应该为三列布局制定相关规则#gallery li:nth-child(3n+1) {clear: left;}。

它目前靠运气(由于特定元素的内容，如果您更改它们的顺序，它将失败)