Question

使用CSS

制作4by4网格（4行和4列）的正确方法是什么

我已尝试使用列计数，但可以获得网格的完整外观，边框不会正确地延伸到元素。

我们还有其他办法吗？如果是这样，请帮助

以下是代码

#container {
  width: 300px;
  column-count: 4;
  background: green;
  border: 1px solid;
  column-rule: 1px solid;
}
.box {
  color: blue;
  border-bottom: 1px solid;
}
.box .contents {
  visibility: hidden;
  width: 100px;
}

<div id="container">
  <div class="box">c-1
    <p class="contents"></p>
  </div>
  <div class="box">c-2

    <p class="contents"></p>
  </div>
  <div class="box">c-3

    <p class="contents"></p>
  </div>
  <div class="box">c-4

    <p class="contents"></p>
  </div>

  <div class="box">c-5

    <p class="contents"></p>
  </div>
  <div class="box">c-6

    <p class="contents"></p>
  </div>
  <div class="box">c-7

    <p class="contents"></p>
  </div>
  <div class="box">c-8

    <p class="contents"></p>
  </div>

  <div class="box">c-9

    <p class="contents"></p>
  </div>
  <div class="box">c-10

    <p class="contents"></p>
  </div>
  <div class="box">c-11

    <p class="contents"></p>
  </div>
  <div class="box">c-12

    <p class="contents"></p>
  </div>

  <div class="box">c-13

    <p class="contents"></p>
  </div>
  <div class="box">c-14

    <p class="contents"></p>
  </div>
  <div class="box">c-15

    <p class="contents"></p>
  </div>
  <div class="box">c-16

    <p class="contents"></p>
  </div>
</div>

由于

Answer 1

那不行，不行。查看flex-box或float-right，了解div元素的网格类型排列。 Flexbox特别强大，实际上只需要2-3行CSS来实现这一目标：

* { box-sizing: border-box; }
#container { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; background: green; }

#container > div { width: 25%; height: 25vw; border: white 1px solid; }

发生了什么：

大小调整 - 根据您使用的浏览器，1px边框将添加到整体宽度并打破网格（例如：100px框的25％是25px，但是如果您的盒子大小没有关闭，边框会导致盒子膨胀到27px。如果每个盒子是27px，其中一个盒子会被击倒到下一行bc那里没有空间留在它上面的那一行上。）

通过将其设置为border-box，意味着我们在指定DOM的宽度时包含边框。

宽度和高度： 25％适用于宽度但不适用于高度，因此我们使用vw测量指定高度。小心这个单位，当前版本-1不支持它（感谢IE）。

柔性一切 接近现代CSS布局的巧妙方法。有很多bells and whistles，但总的来说，我认为我上面使用的规则是不言自明的。我很高兴在评论中提供任何澄清。

https://jsfiddle.net/z_herring/cg71okst/

我们如何使用css制作一个4乘4的网格

1 个答案: