Question

对于我的作业，我应该制作受容器宽度约束的4x2网格：66％并向右浮动。

我已经实现了这一点，但如果我以某种方式调整它，那么细胞将流向下一行。我希望将它保持在同一行，并由包含行的div包含。

我的代码：

.container{
  width: 66%;
  height: auto;
  border: 5px solid blue;
  float: right;
  text-align: center;
}
.floating-box {
    float: left;
    width: 23%;
    height: 99%;
    margin: 5px;
    border: 1px solid #b3b3b3;
}
.floating-box2 {
    float: left;
    width: 21%;
    height: 99%;
    margin: 5px;
    border: 1px solid #b3b3b3;
}
img {
  width: 100%;
  height: auto;
}
#row1 {
  width: 99%;
  height: 195px;
}
#row2 {
  width: 99%;
  height: 200px;
}

<body>
  <div class="container">
  <article>
  <div id="row1">
    <div class="floating-box">
      <img src="http://eden.rutgers.edu/~ttb39/1.jpg"><a href="www.google.com">Robots Replacing Our Future?</a>
    </div>
    <div class="floating-box">
      <img src="http://eden.rutgers.edu/~ttb39/2.jpg"></a><a href="www.google.com">The Universe is in Us</a>
    </div>
    <div class="floating-box">
      <img src="http://eden.rutgers.edu/~ttb39/3.jpg"><a href="www.google.com">New Funding Towards For ICE</a>
    </div>
    <div class="floating-box">
      <img src="http://eden.rutgers.edu/~ttb39/4.jpg"><a href="www.google.com">Ongoing Refugee Crisis</a>
    </div>
  </div>

  <div id="row2">
  <div id="row2">
  <div class="floating-box2"><img src="http://eden.rutgers.edu/~ttb39/5.jpg"><a href="www.google.com">Oil in 2017</a></div>

  <div class="floating-box2"><img src="http://eden.rutgers.edu/~ttb39/6.jpg"><a href="www.google.com">Why Travel?</a></div>
  <div class="floating-box2"><img src="http://eden.rutgers.edu/~ttb39/7.jpg"><a href="www.google.com">Religion Today</a></div>
  <div class="floating-box2"><img src="http://eden.rutgers.edu/~ttb39/8.jpg"><a href="www.google.com">Obamacare Repeal Pulled</a></div>
  </div>
  </article>
  </div>
  </div>
</body>

Answer 1

嗨，问题是这个：

row1 width = 395.297 div.floating-box = 23％= 90.906px + 2px + 10px = 102.9px 102.9px * 4 = 411.6px

和411.6＆gt; 395.297px，因此它下降了。您可以通过删除边距和边框或减小浮动框的大小来修复它。

编辑：当然对于大屏幕它会工作正常，因为你有8％的储备，但在小屏幕上它是不够的。您还可以通过媒体查询仅在小屏幕上删除保证金

如何防止这个4x2网格溢出到下一行？

1 个答案: