如何实现css图像网格系统

Question

我正在尝试使用css实现以下css网格系统，如图所示。我不知道正确的方法是什么。

如果有三个或三个以上的图像，则第一个孩子应该占据更大的空间，可以说是50％，其余的孩子则共享其余的空间。

.just-3:first-child {
  width:   50% !important;
  margin-right: 0px !important;
  float: left;
}

.just-3:nth-child(2) {
  float: left;
  height: 50%;
}
.just-3:nth-child(3) {
  float: left;
  height: 50%;
}

Answer 1

您的宽度大于50％；在这方面，它是66.7％。 如果要使用50％，则仅将其用于高度。

示例html：

<div>
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAYAAADESFVDAAAAF0lEQVR42mN8ay/+n4EAYBxVNKqIOEUAHxwkMbzRAlUAAAAASUVORK5CYII=">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAYAAADESFVDAAAAF0lEQVR42mMUd3v7n4EAYBxVNKqIOEUAjRQkoX/487YAAAAASUVORK5CYII=">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAYAAADESFVDAAAAF0lEQVR42mP8/5fhPwMBwDiqaFQRcYoAP8YvwQxY+AYAAAAASUVORK5CYII=">
</div>

像这样的CSS：

div{
  display:flex;  
  flex-direction: column;
  flex-wrap:wrap;
  width:66.67vh;
  height:100vh;
}

img:first-child{
  height:100%;
}
img{
  height:50%;
  width:auto;
}