table布局

style.css

html,body { margin: 0;}

.container {
  background: #f0f3f6;
  display: table;
  width: 100%;
/*  不加这个无法正确等宽切分  */
  table-layout: fixed;
}

.item {
  display: table-cell;
  width: 33.33%;
  overflow: hidden;
  
  box-sizing: border-box;
  padding: 10px;
  border-right: 1px dashed;
  background: #f0f0f0;
}
.item:nth-last-child(1) {
  border-right: none;
}

table-layout.html

<div class="container">
  <div class="item">
    行行重行行，与君生别离。
    <br>相去万余里，各在天一涯；
    <br>道路阻且长，会面安可知？
    <br>胡马依北风，越鸟巢南枝。
    <br>相去日已远，衣带日已缓；
    <br>浮云蔽白日，游子不顾反。
    <br>思君令人老，岁月忽已晚。
    <br>弃捐勿复道，努力加餐饭！
  </div>
  <div class="item">
    人生天地间，忽如远行客。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
  </div>
  <div class="item">
    同心而离居，忧伤以终老
  </div>
</div>

table.markdown

table布局

A Pen by Creeper on CodePen.

License.