内容没有正确包装？

Question

我在我的投资组合网站上遇到问题，其内容未正确包装。对于宽度大于480px的三列视图，它看起来很好，但是当它在它之下时，它会切换到两列布局/移动视图，并且它不再适当地换行。

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

HTML Skeleton：

<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;}制定相关规则。

它目前运气好（由于特定项目的内容，如果你改变它们的顺序它会失败）

Answer 2

这是由于浮动的元素没有相同的高度。尝试使用flexbox而不是浮点数：

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

移除花车并在margin-bottom规则中添加li以保留一些垂直距离

Answer 3

我建议你在小设备的每两个元素之后添加一个clearfix。

以下是它的外观示例。

@media screen and (max-width: 479px) {
  .clearfix-sm:after {
    display: table;
    clear: both;
    content: " ";
  }
}

<div id="wrapper">
  <section>
    <ul id="gallery">
      <li></li>
      <li></li>
      <div class="clearfix-sm"></div>
      <li></li>
      <li></li>
      <div class="clearfix-sm"></div>
      <li></li>
      <li></li>
      <div class="clearfix-sm"></div>
    </ul>
  </section>
</div>