解决半日历布局中图片重叠及标题跨列显示问题

嘿，我来帮你搞定这个半日历布局的难题！你遇到的文本无法跨多列、图片重叠的问题，根源在于当前使用的float+inline布局不够灵活，咱们换成CSS Grid来实现会更高效——它原生支持跨列布局，还能自动管理元素位置，彻底解决重叠问题。

核心解决方案思路 #

• 用CSS Grid重构整体布局，通过grid-template-columns定义网格列轨道，精准控制每列宽度
• 给需要跨列的标题/文本、图片元素，通过grid-column: span N指定跨越的列数
• 统一设置元素的内边距、外边距，配合width: 100%让图片自适应列宽，避免溢出重叠

完整代码实现 #

CSS 代码 #

/* 网格容器，定义9列等宽轨道，可根据需求调整宽度 */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 12px; /* 列之间的间距，避免元素拥挤重叠 */
  padding: 0 5%; /* 保留原布局的左右边距 */
}

/* 月份容器基础样式 */
.month-card {
  padding: 3px;
  text-align: justify;
}

/* 跨列样式：根据需要设置跨越的列数 */
.col-span-2 {
  grid-column: span 2;
}

.col-span-3 {
  grid-column: span 3;
}

/* 图片自适应列宽，避免溢出 */
.month-card img {
  width: 100%;
  margin: 8px 0;
}

HTML 代码 #

<!DOCTYPE HTML>
<html>
<head>
  <style>
    /* 把上面的CSS代码放在这里 */
  </style>
</head>
<body>
  <div class="calendar-grid">
    <div class="month-card">
      <strong>Jan</strong><br><br>
      No Training Due.
    </div>
    <div class="month-card">
      <strong>Feb</strong><br><br>
      No Training Due.
    </div>
    <div class="month-card">
      <strong>March</strong><br><br>
      No Training Due.
    </div>
    <div class="month-card col-span-2"> <!-- 跨2列 -->
      <strong>Apr</strong><br><br>
      <img src="http://dummyimage.com/400x100/000/fff"/>
      <span>The my class training opens Apr 16 - June 16. Open to All Associates</span>
    </div>
    <div class="month-card">
      <strong>May</strong><br>
      <img src="http://dummyimage.com/100x100/000/fff"/>
      Medicaid Compliance<br>
    </div>
    <div class="month-card">
      <strong>June</strong><br>
    </div>
    <div class="month-card col-span-3"> <!-- 跨3列 -->
      <strong>July</strong><br>
      multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images.
    </div>
    <div class="month-card">
      <strong>Aug</strong><br>
      multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images.
    </div>
    <div class="month-card">
      <strong>Sep</strong><br>
      multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images. multi-column layout with inline images.
    </div>
  </div>
</body>
</html>

关键细节说明 #

1. Grid布局的优势：相比float布局，Grid能直接通过grid-column控制元素跨列，不需要手动计算left/right值，彻底避免定位混乱导致的重叠
2. 图片自适应：给图片设置width: 100%，让它自动填满所在的网格列，不会超出容器导致重叠
3. 灵活的跨列控制：你可以根据需求调整col-span-2/col-span-3这类类名的grid-column值，轻松实现任意列数的跨越，不管是文本还是图片都能生效

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