html - 如何在两个图像之间添加填充

Question

我想做一个如下图所示的布局

Image

我用这段代码试过了

* {
  box-sizing: border-box;
}
.column2 {
  float: left;
  padding: 5px;
}

.column {
  float: left;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
padding: 5px;
}

<div class="row">
  <div class="column2">
    <img src="https://placehold.it/700" style="width:100%">
  </div>
  <div class="column">
    <img src="https://placehold.it/320x173" style="width:100%">
    <img src="https://placehold.it/320x172" style="width:100%">
  </div>
</div>

但我无法在 320x173 和 320x172 图像之间添加填充。 (我需要 1366x1080 分辨率)我如何填充到这个？我需要最终结果如附图所示

Answer 1

只需使用 grid-box通过将 grid 设置为 display 来布局，例如 display: grid; 为您的布局创建列和行，并使用 grid-column-gap和 grid-row-gap控制行间距和列，您可以简单地创建特定数量的列和行，例如

grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(2, 1fr);

以上将创建 2 个相等的列和 2 个相等的行，如果您不想要相等的行和列，您可以简单地根据其父列的大小指定每行列的大小

grid-template-rows: 200px 150px;
grid-template-columns: 102px 50px;

上面将创建 2 行和 2 列，其中 2 行第一行曾经有 200px，第二行有 150px 并且 columns.

但是这里有一个你自己的代码的例子

* {
  box-sizing: border-box;
}


/*.column2 {
  float: left;
  padding: 5px;
}

.column {
  float: left;
  padding: 5px;
}

Clearfix (clear floats)
.row::after {
  content: "";
  clear: both;
  display: table;
padding: 5px;
} */

.row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 20px;
}

.column {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-row-gap: 20px;
}

<div class="row">
  <div class="column2">
    <img src="https://placehold.it/700" style="width:100%; height:100%;">
  </div>
  <div class="column">
    <img src="https://placehold.it/320x173" style="width:100%">
    <img src="https://placehold.it/320x172" style="width:100%">
  </div>
</div>