如何实现如图所示的div卡片布局？现有代码CSS定位遇阻

给你两种实用的实现方式，满足「两个single在上、两个second在下」的布局需求：

方式一：Flexbox 布局 #

Flexbox是实现这类布局最简便的方案之一，代码如下：

HTML（基于你的代码微调） #

<div class="cards" id="cards">
  <div class="container">
    <div class="single">
      <span class="dot"></span>
    </div>
    <div class="single">
      <span class="dot"></span>
    </div>
    <div class="second">
      <span class="dot"></span>
    </div>
    <div class="second">
      <span class="dot"></span>
    </div>
  </div>
</div>

CSS 代码 #

/* 容器设置为Flex布局，允许换行 */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* 卡片间距，可自行调整 */
  max-width: 600px; /* 限制容器宽度，避免卡片过宽 */
  margin: 0 auto; /* 容器居中 */
  padding: 20px;
}

/* 统一卡片基础样式 */
.single, .second {
  flex: 1 1 calc(50% - 8px); /* 每个卡片占容器一半宽度，减去半份间距 */
  min-width: 200px; /* 最小宽度，防止卡片过窄 */
  height: 180px; /* 卡片高度，可自行调整 */
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: relative;
}

/* 右上角圆点样式 */
.dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ff4444; /* 圆点颜色可调整 */
}

方式二：Grid 布局 #

如果习惯用Grid，也可以这样实现：

CSS 代码 #

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 自适应列数，最小宽度200px */
  gap: 16px;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

/* 卡片基础样式和圆点样式同Flex方案 */
.single, .second {
  height: 180px;
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: relative;
}

.dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ff4444;
}

补充说明 #

• 两种方案都支持响应式：屏幕变窄时，卡片会自动堆叠成一列；如果要固定两行布局（不管屏幕宽度都保持两行），可以把Grid的grid-template-columns改成repeat(2, 1fr)，Flex的flex-basis改成50%
• 可根据需求调整间距、高度、背景色等样式参数

内容的提问来源于stack exchange，提问作者Arjanit Beqiri