根据标题长度对齐文本[重复]

Question

我正在制作带有标题和文本的小盒子。两者都是动态变化的。所以标题可能比预期的要长。它可以在一行、两行、三行等上。但我需要移动文本，所以它在所有框中都从相同的位置开始，如下图所示。现在我正在使用 JsAlign 实现这个结果，但缺点是它等待页面加载，然后内容跳转到它的位置。有没有办法只使用 CSS 来做到这一点？我考虑过使用 flex，但这并没有让我到任何地方。我尝试使用表格，但这意味着我只有一行用于图标，一行用于标题，一行用于文本。而且由于数据来自数据库，因此我必须有 3 个周期并且它不会响应。你有什么想法如何实现它？

Answer 1

即使使用弹性盒子，我也只能使用盒子“顶部”的固定高度值。

有人有想法吗？我真的很想在没有固定值的情况下让它工作。

html {
  box-sizing: border-box;
}

*, ::before, ::after {
  box-sizing: inherit;
}

body {
  background-color: #FFF;
  font-family: sans-serif;
  padding: 30px;
}

.container {
  max-width: 1024px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.content-box {
  width: 230px;
  background-color: #f6f6f7;
  padding: 30px;
  margin: 0 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.content-box .fa, .content-box .link {
  color: #e81500;
}
.content-box a {
  display: block;
  margin: 30px 0 0 0;
  text-decoration: none;
  font-weight: 700;
}
.content-box a i {
  padding-right: 0.2em;
}
.content-box h3 {
  font-size: 16px;
}
.content-box p {
  margin: 0 0 1em 0;
}
.content-box p:last-of-type {
  margin-bottom: 0;
}
.content-box__top {
  height: 120px; /* <-- fixed value :( */
  overflow: hidden;
  margin-bottom: 15px;
  padding-bottom: 15px;
}
.content-box__bottom {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">

    <div class="content-box">
        <div class="content-box__top">
          <i class="fa fa-4x fa-calendar" aria-hidden="true"></i>
          <h3>Our example heading goes here</h3>
        </div>
        <div class="content-box__bottom">
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                  <a href="#" class="link"><i class="fa fa-arrow-right" aria-hidden="true"></i> Link</a>
        </div>
    </div>
    
    <div class="content-box">
        <div class="content-box__top">
          <i class="fa fa-4x fa-line-chart" aria-hidden="true"></i>
          <h3>Our heading</h3>
        </div>
        <div class="content-box__bottom">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
          <a href="#" class="link"><i class="fa fa-arrow-right" aria-hidden="true"></i> Link</a>
        </div>
    </div>
    
    
</div>