垂直与水平 - 异常网格

Question

我有一个布局，我试图让它响应。

图像之间存在10px的差距，我遇到的问题是使布局响应。它不会使底边对齐某些尺寸，因为浏览器试图保留水平图像上的比例。

大垂直图像是750像素×1200像素。小的我用750px乘595px，这是高度的一半减去间隙高度的一半。

欢迎任何可能的解决方案或想法。

Answer 1

试试这个（工作codepen）

<div class="group">
  <div class="sm"></div>
  <div class="sm"></div>
</div>
<div class="lg"></div>

CSS

html {
    overflow-y: scroll;
    height: 100%;

    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

div {
  width: calc(50% - 5px);
  float: left;
}

.group {
  margin-right: 10px;
}

.sm {
  height: 200px;
  margin-bottom: 10px;
  width: 100%;
  background: green;
  border: 1px solid red;
}

.lg {
  height: calc(400px + 10px);
  background: green;
  border: 1px solid red;
}

@media screen and (max-width: 700px) {
  div {
    width: 100%;
  } 
}