Question

两个问题：

1）为什么我的div中的列不填充页面（占用空白），而不是溢出到下一列？（运行代码段时，请单击“查看全页”。）

2）如何使列更具响应性？（即，当我更改屏幕尺寸时，请放大和缩小列，而不是将每一列向左缩小或向右拉伸）。

#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){
}

将执行的操作是检测屏幕宽度何时小于或等于700像素，并且在这种情况下，只需将您希望网站显示的内容放在屏幕上即可。因此，举例来说，如果自然而然地，您有一个div，它在计算机上的宽度应该是一半：

div {
    width: 50%;
}

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

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

它会相应地更改，希望对您有所帮助！

如何让div填充整个屏幕（砌体/ Pinterest）布局

1 个答案: