如何使用div在没有空格的情况下水平填充页面

Question

我有这个简单但令人沮丧的CSS问题。我试图用div / box完全填充页面。问题是，这些盒子一直都有相同的宽度，因此盒子不会均匀填满。让我来证明一下：

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％规则可能是可以接受的。但是，您可能希望限制尺寸可以走多远（最小宽度）。此外，这将使你的宽高比完全沉重，你可能会觉得这是不可接受的。

另一个解决方案是在一个较大的div的顶部放置一个'viewport'div，允许一些流血，以最小化'gosh，它只有一个像素只有'效果（你得到一个巨大的，这个解决方案允许卡在强制使用新列之前从视口中渗出一些。它只是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，但根据环境可能相当容易实现。是的，我之前做过这样的事情;）

Answer 2

尝试为容器div boxes提供最大盒子数width +每个盒子的边距。在你的例子中，这将是200 * 3 + 30.这是假设你每行只需要三个盒子。

Answer 3

等等 HTML：

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

的CSS：

.box{
    height: 100px;
    width: 33%;
}