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

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>