实现下载模块布局时自定义CSS失效错乱，求DOM结构与样式修正指导

现有代码核心问题定位 #

• DOM结构设计缺陷
  • 同个类名download-link-content嵌套了两层无意义的父容器，直接打乱布局宽度计算逻辑
  • 预留空边的.empty-space节点位置错配：本应用于控制左右栏边距的占位节点，被分别塞在左侧信息区内部、右侧下载区末尾，完全没有实现设计稿的左右分栏宽度分配
  • 语义嵌套不规范：将块级元素div嵌套在<b>行内标签内部，会撑乱文本行高与排版
• CSS写法缺陷
  • 全程使用float实现布局，没有给父容器添加清除浮动规则，导致所有浮动元素脱离文档流后，父容器高度直接塌陷，整体排版错位
  • 宽度计算逻辑错误：.download-information设置70%宽度后，内部又嵌入30%宽度的.empty-space，实际可展示信息的区域仅占容器总宽度的49%，远小于设计稿预期
  • 缺少基础排版规则：没有给缩略图、文本区、操作区设置垂直对齐规则与元素间距，所有元素默认顶格贴边，没有排版呼吸感

可直接复用的修正方案 #

修正后的合理DOM结构 #

<div class="download-content">
  <!-- 左侧信息展示区 -->
  <div class="download-information">
    <div class="download-thumbnail">
      <img src="本地缩略图路径" alt="文件缩略图">
    </div>
    <div class="download-profile">
      <div class="img-title">Demo title</div>
      <div class="img-description">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      </div>
    </div>
  </div>
  <!-- 右侧下载操作区 -->
  <div class="download-action">
    <div class="download-icon"><i class="fas fa-download"></i></div>
    <div class="download-meta">
      <a href="#" class="download-link">Download</a>
      <span class="file-info">(3,2 MB, PDF)</span>
    </div>
  </div>
</div>

配套落地CSS代码 #

/* 用Flex布局替代老式浮动，从根源避免浮动塌陷问题 */
.download-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 1rem 0;
}
/* 左侧信息区占总宽度70% */
.download-information {
  flex: 0 0 70%;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
/* 缩略图固定尺寸 */
.download-thumbnail img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
}
/* 文本区自适应剩余宽度 */
.download-profile {
  flex: 1;
}
.img-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.img-description {
  font-size: 0.875rem;
  color: #666;
  line-height: 1.5;
}
/* 右侧下载操作区占总宽度30% */
.download-action {
  flex: 0 0 30%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-end;
}
.download-icon {
  color: #2563eb;
  font-size: 1.2rem;
}
.download-link {
  font-weight: 500;
  color: #2563eb;
  text-decoration: none;
}
.file-info {
  font-size: 0.875rem;
  color: #666;
}

采用Flex布局的核心优势是不需要额外编写清除浮动的代码，左右两栏的宽度占比可通过flex属性直接控制，元素垂直对齐不需要手动计算偏移量，对前端调试经验不足的开发者来说维护成本极低。

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