html - 如何让 div 填满整个屏幕(Masonry/Pinterest)布局

Question

两个问题:

1) 为什么我的 div 中的列不会填满页面(占用空白)而不是溢出到下一列？ (运行代码片段时单击查看完整页面。)

2) 如何让栏目更灵敏？ (即，当我更改屏幕大小时，让列放大和缩小，而不是将每一列向左收缩或向右拉伸(stretch))。

#container {
  /*min-height: 100vh;*/
  /*min-width: 100vw;*/
  grid-gap: 10px;
}

.columns {
  -moz-column-count: 5;
  -moz-column-gap: 1em;
  -moz-column-width: 40%;
  -webkit-column-count: 5;
  -webkit-column-gap: 1em;
  -webkit-column-width: 40%;
  column-count: 5;
  column-gap: 1em;
  column-width: 40%;
}

.box {
  margin-bottom: 10px;
}

.box.one {
  height: 230px;
  background-color: grey;
}

.box.two {
  height: 230px;
  background-color: grey;
}

.box.three {
  background-color: pink;
  height: 230px;
}

.box.four {
  background-color: grey;
  height: 180px;
}

.box.five {
  background-color: orange;
  height: 170px;
}

.box.six {
  background-color: grey;
  height: 180px;
}

.box.seven {
  background-color: grey;
  height: 200px;
}

.box.eight {
  background-color: blue;
  height: 200px;
}

.box.nine {
  background-color: grey;
  height: 200px;
}

.box.ten {
  background-color: green;
  height: 200px;
}

.box.eleven {
  background-color: grey;
  height: 200px;
}

.box.twelve {
  background-color: grey;
  height: 200px;
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">


<div id="container" class="columns">
  <div class="box one">1</div>
  <div class="box two">2</div>
  <div class="box three">3</div>
  <div class="box four">4</div>
  <div class="box five">5</div>
  <div class="box six">6</div>
  <div class="box seven">7</div>
  <div class="box eight">8</div>
  <div class="box nine">9</div>
  <div class="box ten">10</div>
  <div class="box eleven">11</div>
  <div class="box twelve">12</div>
</div>

我正在尝试制作一个像 Pinterest 这样的登录/登陆页面。这是 codepen .

我尝试修改最大/最小高度/宽度并将其设置为 100%、100px、100vh/vw，但似乎没有任何效果。

我哪里错了？请帮忙，谢谢!

Answer 1

就根据屏幕尺寸使其响应而言，您需要添加媒体查询，例如:

@media(max-width:700px){
}

当屏幕宽度为 700px 或更小时，它将做的是检测，如果在这种情况下，您只需在内部放置您希望网站看起来的样子。因此，例如，如果自然而然地，您有一个在计算机上是半宽的 div，您会这样做:

div {
    width: 50%;
}

然后，如果您在手机屏幕上并且想要使该 div 为全宽，您只需添加:

div {
    width: 50%;
}
@media(max-width:600px) {
    div {
         width: 100%;
    }
}

它会相应地改变，希望这对你有帮助!