Question

我是一名新闻专业的学生，我不知道要为工作的2x2图像网格制作CSS，起初图像是连续的，现在它们很长地排成一列。有人可以帮我弄清楚该怎么做吗？ (photo of my code)

/* Work Layout */
.work div {
  display: flex;
  flex-flow: wrap;
  width: 150px;
  height: 300px;
}
.img {
  "images/benbball.jpg"
  width: 50px;
}

Answer 1

您需要做的就是设置一个容器来保存所有图像，并在孩子的float: left选择器上设置width: 50%和img。将width设置为50%时，每行只能容纳两个，而下两个将放到下一行。

这可以在下面看到：

.container img {
  float: left;
  width: 50%;
}

<div class="container">
  <img src="http://placehold.it/50" />
  <img src="http://placehold.it/50" />
  <img src="http://placehold.it/50" />
  <img src="http://placehold.it/50" />
</div>

如果您要在图像之间留出空间，则需要为每个<img>赋予一个父级包含元素，以将float: left和width: 50%设置为开，并附加一个受约束的{{ 1}}和子项width上的可选margin。为了获得最佳效果，这将是计算驱动的宽度，该宽度是<img>减去边距：

100%

.container .image {
  width: 50%;
  float: left;
}

.container img {
  width: calc(100% - (20px * 2));
  margin: 20px;
}

或者，如果您想使用flexbox，则需要在容器上设置<div class="container"> <div class="image"> <img src="http://placehold.it/50" /> </div> <div class="image"> <img src="http://placehold.it/50" /> </div> <div class="image"> <img src="http://placehold.it/50" /> </div> <div class="image"> <img src="http://placehold.it/50" /> </div> </div>和display: flex：

flex-wrap: wrap

.container {
  display: flex;
  flex-wrap: wrap;
}

.container .image {
  width: 50%;
}

.container img {
  width: calc(100% - (20px * 2));
  margin: 20px;
}

有了flexbox，您就不需要<div class="container"> <div class="image"> <img src="http://placehold.it/50" /> </div> <div class="image"> <img src="http://placehold.it/50" /> </div> <div class="image"> <img src="http://placehold.it/50" /> </div> <div class="image"> <img src="http://placehold.it/50" /> </div> </div>。

Answer 2

CSS网格

.wrapper {
  display: inline-grid;
  grid-template-columns: repeat(2, [col-start] 1fr);
  grid-gap: 10px;
}


<div class="grid">
  <img src="http://placehold.it/50" />
  <img src="http://placehold.it/50" />
  <img src="http://placehold.it/50" />
  <img src="http://placehold.it/50" />
</div>

如何制作2x2图像网格CSS

2 个答案: