如何用DIV实现与Table一致的换行布局效果？

我懂你现在的烦恼——用Table轻轻松松就实现了那种带圆点的对齐布局，换成DIV就各种掉链子：要么元素莫名其妙换行，要么堆在一起乱掉。其实核心问题出在浮动布局的清除逻辑和元素对齐处理上，而且现在有更现代的CSS布局方案（Flexbox、Grid）比浮动好用太多，下面给你几个靠谱的替代方案：

方案1：Flexbox布局（首推，现代浏览器兼容性拉满） #

Flexbox是做这种横向对齐布局最省心的方式，不用纠结浮动清除，还能轻松控制垂直对齐，完美匹配你Table布局的效果：

<style>
  .list-item {
    display: flex;
    align-items: flex-start; /* 和Table的vertical-align:top保持一致，顶部对齐 */
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    margin-bottom: 8px; /* 可选，给每个列表项加一点垂直间距 */
  }
  .list-dot {
    width: 5%;
    padding-right: 8px; /* 用内边距代替&nbsp;，圆点和文本的间距更可控 */
  }
  .list-text {
    width: 95%;
  }
</style>

<div class="list-item">
  <div class="list-dot">●</div>
  <div class="list-text">{{transDepositReturn}}</div>
</div>
<div class="list-item">
  <div class="list-dot">●</div>
  <div class="list-text">{{transDepositReturn}}</div>
</div>
<div class="list-item">
  <div class="list-dot">●</div>
  <div class="list-text">{{transDepositReturn}}</div>
</div>

方案2：Grid布局（适合未来可能扩展的复杂网格场景） #

Grid布局也能轻松实现这种效果，代码同样简洁，而且如果以后要调整列宽或者加新元素，扩展性更强：

<style>
  .list-container {
    display: grid;
    grid-template-columns: 5% 95%;
    gap: 8px; /* 列之间的间距，比手动加内边距更优雅 */
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
  }
  .list-dot {
    align-self: start; /* 强制顶部对齐，和Table效果一致 */
  }
</style>

<div class="list-container">
  <div class="list-dot">●</div>
  <div>{{transDepositReturn}}</div>
  <div class="list-dot">●</div>
  <div>{{transDepositReturn}}</div>
  <div class="list-dot">●</div>
  <div>{{transDepositReturn}}</div>
</div>

方案3：修复你原来的浮动布局 #

如果你一定要用浮动，得解决两个关键问题：浮动元素导致的父容器高度塌陷和元素宽度溢出（padding/border会让总宽度超过100%），修复后的代码如下：

<style>
  .list-row {
    width: 100%;
    overflow: hidden; /* 清除浮动，解决父容器高度塌陷问题 */
    margin-bottom: 8px;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
  }
  .list-dot {
    width: 5%;
    float: left;
    vertical-align: top;
    padding-right: 8px;
    box-sizing: border-box; /* 让padding包含在宽度内，避免总宽度溢出 */
  }
  .list-text {
    width: 95%;
    float: left;
    vertical-align: top;
    box-sizing: border-box;
  }
</style>

<div class="list-row">
  <div class="list-dot">●</div>
  <div class="list-text">{{transDepositReturn}}</div>
</div>
<div class="list-row">
  <div class="list-dot">●</div>
  <div class="list-text">{{transDepositReturn}}</div>
</div>
<div class="list-row">
  <div class="list-dot">●</div>
  <div class="list-text">{{transDepositReturn}}</div>
</div>

为什么你的原DIV代码出问题？ #

• 第一个列表行没加浮动，两个子DIV作为块级元素默认会上下换行
• 后面的行加了浮动，但父容器没做清除浮动处理，容易导致后续元素和这些行堆叠；另外子元素如果有padding/border，5%+95%的宽度再加上内边距会超过100%，直接导致换行

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