javascript - 如何用末尾没有空白的div水平填充页面

Question

我遇到了这个简单但令人沮丧的 CSS 问题。我试图用 div/boxes 完全填充一个页面。问题是，这些盒子始终具有相同的宽度，因此盒子不会均匀填满。让我演示一下:

Fiddle .

CSS:

.box {
    float: left;
    width: 200px;
    height: 200px;
    margin: 0px 10px 10px 0px;
    background-color: #000000;
}

HTML:

<div id="boxes">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

没关系:

但是如果用户有一个较小的窗口尺寸，它会像这样:

这将是最好的解决方案，调整框的大小以水平均匀地适合屏幕:

调整窗口大小时使它们适合整个页面的最佳解决方案是什么？最好是纯 CSS(如果可能的话)。

Answer 1

Here is a working example.

IMO，解决方案取决于您的需求。如果能够缩放图像，那么这里其他人提供的 33% 规则可能是可以接受的。但是，您可能希望限制尺寸可以走多远(最小宽度)。此外，这将完全破坏您的纵横比，您可能会觉得这是 Not Acceptable 。

另一种解决方案是在一个较大的 div 之上设置一个“视口(viewport)”div，允许一些溢出以最小化“天哪，它只有一个像素”效果(你会得到一个巨大的，空白列。此解决方案允许卡片在强制新列之前从视口(viewport)中流出一点。它仅适用于 CSS。这是提供的示例。通过更改外部容器的宽度和高度('my -外'):

/* CSS */
.my-outer {
  position : relative;
  box-sizing : border-box;
  width  : 350px;
  height : 450px;
  border   : 1px solid red;
  overflow-x : hidden;
  overflow-y : auto;
}
.my-inner {
  position : relative;
  box-sizing : border-box;
  border : 1px solid green;
  width : 120%;
}
.my-card { 
  box-sizing   : border-box;
  float : left;
  margin : 10px;
  width  : 100px;
  height : 100px;
  font-size : 50px;
  line-height : 100px;
  text-align  : center;
  font-weight : 800;
  background  : #aaf;
  color       : #fff;
  border-radius : 2x;
  box-shadow: 0 0 16px -2px #888;
}

<!-- HTML -->
<div class="my-outer">
  <div class="my-inner">
   <div class="my-card">1</div>
   <div class="my-card">2</div>
   <div class="my-card">3</div>
   <div class="my-card">4</div>
   <div class="my-card">5</div>
   <div class="my-card">6</div>
   <div class="my-card">7</div>
   <div class="my-card">8</div>
   <div class="my-card">9</div>
   <div class="my-card">10</div>
   <div class="my-card">11</div>
   <div class="my-card">12</div>
   <div class="my-card">13</div>
   <div class="my-card">14</div>
   <div stlye="clear : both;"></div>
 </div>

另一种可能会提供最佳用户体验的替代解决方案是逐步调整容器的大小。这将需要一些 JavaScript，但根据环境的不同，实现起来可能相当容易，也可能非常困难。是的，我以前做过这种事；)