使用float布局专辑条目无法垂直对齐，求高效解决方法

别再用float折腾了，Flexbox是专门解决这类一维布局问题的现代方案，代码简洁还没浮动的副作用，完美解决你的条目横向乱跑的问题。

实现步骤 #

1. 给每个专辑条目套一个容器，把左右内容分别归到两个子容器里
2. 用Flexbox布局实现左右分组，同时让每个条目自动垂直排列

完整代码示例 #

HTML结构

<!-- 整个列表容器 -->
<div class="album-list">
  <!-- 单个专辑条目 -->
  <div class="album-item">
    <!-- 左侧分组：标题+艺术家 -->
    <div class="album-left">
      <div class="albumTitle">专辑标题1</div>
      <div class="xhapyArtist">艺术家名称1</div>
    </div>
    <!-- 右侧分组：日期+时长 -->
    <div class="album-right">
      <div class="date">2024-05-20</div>
      <div class="runtime">42:30</div>
    </div>
  </div>

  <!-- 重复添加条目即可自动垂直排列 -->
  <div class="album-item">
    <div class="album-left">
      <div class="albumTitle">专辑标题2</div>
      <div class="xhapyArtist">艺术家名称2</div>
    </div>
    <div class="album-right">
      <div class="date">2024-06-15</div>
      <div class="runtime">50:12</div>
    </div>
  </div>
</div>

CSS样式

/* 单个条目容器：核心flex布局 */
.album-item {
  display: flex;
  justify-content: space-between; /* 左右分组自动拉开距离 */
  padding: 12px;
  border-bottom: 1px solid #e5e5e5; /* 可选：加分隔线区分条目 */
  margin-bottom: 8px;
}

/* 左侧内容垂直排列 */
.album-left {
  display: flex;
  flex-direction: column;
  gap: 4px; /* 标题和艺术家之间的间距 */
}

/* 右侧内容垂直排列，可选右对齐 */
.album-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 让日期和时长靠右对齐 */
  gap: 4px;
}

/* 可选：给文本加基础样式 */
.albumTitle {
  font-weight: 600;
  font-size: 1em;
}
.xhapyArtist {
  color: #666;
  font-size: 0.9em;
}
.date, .runtime {
  color: #888;
  font-size: 0.9em;
}

为什么这个方案比float好 #

• 完全不用处理浮动的清除浮动问题，避免了容器高度塌陷、元素乱跑的情况
• 代码逻辑直观，直接用justify-content: space-between就能实现左右分组，后续调整间距、对齐方式都很方便
• 自带响应式适配基础，要做移动端堆叠布局时，加一行媒体查询flex-direction: column就能实现

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