根据标题长度对齐文本

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>