table等分布局和flex等分布局差异演示页面

展示

代码

• HTML：

  <h4 class="fill">Table布局</h4>
  <div class="table">
    <div class="td"><p>我是一段长文字，我要打点显示</p></div>
    <div class="td"><img src="/assets/example.jpg"></div>
    <div class="td">文字</div>
  </div>
  
  <h4 class="fill">Flex布局</h4>
  <div class="flex">
    <div class="item"><p>我是一段长文字，我要打点显示</p></div>
    <div class="item"><img src="/assets/example.jpg"></div>
    <div class="item">文字</div>
  </div>

• CSS：

  .table {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .table .td {
    display: table-cell;
  }
  .flex {
    display: flex;
  }
  .flex .item {
    flex: 1;
  }
  :is(.table, .flex) img {
    width: 100%;
  }
  .td, .item {
    border: 1px solid;
  }
  :is(.table, .flex) p {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }