时间戳

首页 > 解决方案 > 如何在 HTML 和 CSS 中实现这种风格

html - 如何在 HTML 和 CSS 中实现这种风格

问题描述

我一直在尝试，但我无法解决这个功能。

这 4 个 div 是父 div 的子 div

我们需要创建，以便 3 个子 div 在一列中，但作为图像的最后一个 div 将在一个单独的列中，并在父 div 内右对齐。

你能帮我找到这个问题的答案吗？

在此处输入图像描述

标签： htmlcss

解决方案

您可以轻松地使用CSS 网格布局来实现这一点。我猜你想要这样的东西，对吧：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "Div-1 Div-4"
    "Div-2 Div-4"
    "Div-3 Div-4";
}
.grid-container div {padding: 10px;}
.Div-4 { grid-area: Div-4; background: #f90;}
.Div-1 { grid-area: Div-1; background: #ccf;}
.Div-2 { grid-area: Div-2; background: #cfc;}
.Div-3 { grid-area: Div-3; background: #fcc;}
<div class="grid-container">
  <div class="Div-4">Div 4</div>
  <div class="Div-1">Div 1</div>
  <div class="Div-2">Div 2</div>
  <div class="Div-3">Div 3</div>
</div>

这里你的父容器是.grid-container. 我使用了交互式 CSS 网格生成器 | Layoutit Grid生成此代码。

预习

预习

推荐阅读