三列高度相同，每列多行动态内容

Question

我正在尝试做的是动态匹配所有三列的总高度，它们都具有可能的动态内容量。每列可以有动态的内容量，给它们动态的高度。这是我想要实现的布局：

还有一些基本的 html/css：https://jsfiddle.net/fmpeyton/f1t2jhkt/

HTML：

<div class="column">
  <div class="box">
    <h4>Title</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aliquid dignissimos necessitatibus eaque accusantium, praesentium reprehenderit enim! Perspiciatis, vitae? Eaque qui explicabo sapiente deleniti corporis quo consequatur voluptate at laboriosam!</p>
  </div>
  <div class="box">
    <h4>Title</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, provident.</p>
  </div>
</div>

<div class="column">
  <div class="box">
    <h4>Title</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et laudantium minus, rem delectus id quasi molestias quibusdam deserunt ab accusantium. Temporibus animi omnis id aperiam deserunt fugiat praesentium quia at sunt quaerat officia, voluptates dolore eaque, debitis magni dignissimos quis suscipit ullam esse laudantium, nobis quisquam. Molestiae facilis maxime porro dolor explicabo possimus ipsam non impedit aut in vitae amet deleniti nam dignissimos debitis nemo similique voluptas fuga, dolorum quod, commodi eum laboriosam asperiores. Quos tempore possimus saepe ut nobis, nihil quam doloremque id provident eos molestiae rem facilis, dolor esse, reprehenderit voluptatibus cupiditate ratione amet quo ea ipsum eum. Magni ut esse accusamus itaque rerum dignissimos quod, quos maxime odit, autem omnis molestiae vitae, quaerat, sequi laboriosam alias earum!</p>
  </div>
</div>

<div class="column">
  <div class="box">
    <h4>Title</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aliquid dignissimos necessitatibus eaque accusantium, praesentium reprehenderit enim! Perspiciatis, vitae? Eaque qui explicabo sapiente deleniti corporis quo consequatur voluptate at laboriosam!</p>
  </div>
  <div class="box">
    <h4>Title</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo aperiam dolorum nesciunt saepe fuga autem dolores impedit eveniet perspiciatis obcaecati.</p>
  </div>
</div>

CSS：

* {
  box-sizing: border-box;
}

.column {
  width: 33.33%;
  padding-right: 30px;
  float: left;
}

.box {
  border: 1px solid #ddd;
  margin-bottom: 20px;
  padding: 20px;
  background-color: #eee;
}

h4 { margin-top: 0; }

如果没有 JS 或 flexbox，我不确定动态内容是否也能做到这一点。有什么想法吗？

Answer 1

如果没有 flexbox 或 JS，您几乎只能将列包装在父 div 中并使用 CSS 表格。

.parent {
  display: table;
  table-layout: fixed;
}
.column {
  display: table-cell;
  width: 33.33%;
  padding: 0 15px;
  border: 1px solid grey;
}

JSFiddle

* {
  box-sizing: border-box;
}
.parent {
  display: table;
  table-layout: fixed;
}
.column {
  display: table-cell;
  width: 33.33%;
  padding: 0 15px;
  background: pink;
  border: 1px solid grey;
}
.box {
  border: 1px solid #ddd;
  margin-bottom: 20px;
  padding: 20px;
  background-color: #eee;
}
h4 {
  margin-top: 0;
}

<div class="parent">
  <div class="column">
    <div class="box">
      <h4>Title</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aliquid dignissimos necessitatibus eaque accusantium, praesentium reprehenderit enim! Perspiciatis, vitae? Eaque qui explicabo sapiente deleniti corporis quo consequatur voluptate at
        laboriosam!
      </p>
    </div>
    <div class="box">
      <h4>Title</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, provident.</p>
    </div>
  </div>

  <div class="column">
    <div class="box">
      <h4>Title</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et laudantium minus, rem delectus id quasi molestias quibusdam deserunt ab accusantium. Temporibus animi omnis id aperiam deserunt fugiat praesentium quia at sunt quaerat officia, voluptates
        dolore eaque, debitis magni dignissimos quis suscipit ullam esse laudantium, nobis quisquam. Molestiae facilis maxime porro dolor explicabo possimus ipsam non impedit aut in vitae amet deleniti nam dignissimos debitis nemo similique voluptas fuga,
        dolorum quod, commodi eum laboriosam asperiores. Quos tempore possimus saepe ut nobis, nihil quam doloremque id provident eos molestiae rem facilis, dolor esse, reprehenderit voluptatibus cupiditate ratione amet quo ea ipsum eum. Magni ut esse
        accusamus itaque rerum dignissimos quod, quos maxime odit, autem omnis molestiae vitae, quaerat, sequi laboriosam alias earum!</p>
    </div>
  </div>

  <div class="column">
    <div class="box">
      <h4>Title</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aliquid dignissimos necessitatibus eaque accusantium, praesentium reprehenderit enim! Perspiciatis, vitae? Eaque qui explicabo sapiente deleniti corporis quo consequatur voluptate at
        laboriosam!
      </p>
    </div>
    <div class="box">
      <h4>Title</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo aperiam dolorum nesciunt saepe fuga autem dolores impedit eveniet perspiciatis obcaecati.</p>
    </div>
  </div>

</div>