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 Tables。

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

JSFiddle

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

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

HTML：

CSS：

1 个答案: