html - 使用 CSS 将段落与图标对齐

Question

我创建了一个简单的段落，其中包含标题、内容和一个图标。我已经为相同的内容编写了以下 HTML 和 CSS

.landing-page-card {
  margin: 10px;
  padding: 20px;
  background: #f2f2f2;
  width: 28%;
  float: left;
}
.card-heading {
  text-transform: uppercase;
  font-size: 24px;
  color: grey;
  margin-bottom: 15px;
}
.card-subheading {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 10px 0;
}
.card-icon {
  width: 40px;
  height: 30px;
  float: left;
  background: black;
  border-radius: 50%;
  margin-right: 10px;
  color: #fff;
  text-align: center;
  margin-top: 4px;
  padding-top: 10px;
}
.card-content {
  font-size: 13px;
}
.card-link {
  text-decoration: none;
  font-size: 15px;
  color: grey;
}

<div class="landing-page-card">
  <h1 class="card-heading">HEADING</h1>
  <h6 class="card-subheading">Sub Heading</h6>
  <div class="card-container">
    <span class="card-icon">icon</span>
    <p class="card-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </br>
  <a href="#" class="card-link" target="_blank">Download Report ></a>
  </p>
</div>
</div>
<div class="landing-page-card">
  <h1 class="card-heading">HEADING</h1>
  <div class="card-content">
    <p>There's power in partnering up. With Nielsen's Connected Partner Program you can easily connect your network. Now, you can shift from managing and analyzing data to making smarter, faster decisions. Because when the data and analytics get smarter, everyone wins.</p>
  </div>
</div>

我希望段落在图标出现时与图标对齐，而在没有图标时占据整个宽度。

我需要什么:

我现在拥有的

JS fiddle 链接 here

提前致谢

Answer 1

首先，没有</br>这样的标签

其次.. 只需为具有兄弟图标的段落添加 CSS:

.card-icon ~ p { margin-left: 50px; }

Updated Fiddle