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

debugcn 发表于 Dev

Vuv ugug

我要进行如下图所示的布局

我用这段代码尝试了

* {
  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分辨率）我padding该怎么办？我需要最终结果像所附的图片一样

牧师加德

只需使用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，第2行有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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。