CSS浮动：为什么我的徽标未在文本前浮动？

Question

这里是初学者，正在学习HTML和CSS（还没有网格和flexbox）。我正在尝试制作一个包含两个水平块的部分，这些水平块由左侧的图像/图标和右侧的文本组成。非常简单，但是我不知何故无法使图标浮动到文本的左侧。它卡在下面的行中。我究竟做错了什么？还是我应该添加什么？

这里是HTML：

<section id="strengths" class="py-3">
    <div class="container">
      <h2 class="main-heading">My Strengths</h2>
      <div class="primary">
        <h3 class="sub-heading">Strategic Thinking</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
        <i class="fas fa-chess-pawn fa-3x"></i>
      </div>
      <br><br>
      <div class="primary">
          <h3 class="sub-heading">Analysis</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
          <i class="far fa-play-circle fa-3x"></i>
        </div>
      </div>
    </section>

这里是一些CSS：

 * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

.container {
       margin: auto;
       max-width: 1100px;
       overflow: auto;
       padding: 50px;  
     }

 #strengths {
       height: 600px;
       margin: auto;
       Display: block;
       background-image: url('./img/mountain-lake.jpg');
       background-size: cover;
     }

#strengths .primary {
       background-color: #ccc7f2;
       padding: 20px;
       margin: 20px;
       border-radius: 10px;
       opacity: 0.75;
       line-height: 1.4em;
     }

#strengths .primary i {
      float: left; 
      margin-right: 20px;
      display: inline;
     }

Answer 1

使用float的主意。我建议您尽快查看flexbox。>

但是，如果您确实要使用它，则应该对HTML进行一些更改。

这样想。您希望图标是一个“列”，而标题和文本一起是另一列。

实现此目标的最佳方法是将文本和标题包装在HTML元素（很可能是div）内

然后您应指定在其父级width中使用的.primary。因此，例如，图标的百分比为5％，标题和文本的百分比为95％-20px，即图标的边距。

见下文

 * {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
 }

 .container {
   margin: auto;
   max-width: 1100px;
   overflow: auto;
   padding: 50px;
 }

 #strengths {
   height: 600px;
   margin: auto;
   Display: block;
   background-image: url('./img/mountain-lake.jpg');
   background-size: cover;
 }

 #strengths .primary {
   background-color: #ccc7f2;
   padding: 20px;
   margin: 20px;
   border-radius: 10px;
   opacity: 0.75;
   line-height: 1.4em;
   float:left;
   width:100%;
 }

 #strengths .primary i {
   float: left;
   margin-right: 20px;
   display: inline;
   width:5%;
 }
  #strengths .primary .wrapper {
    float:right;
    width: calc(95% - 20px);
    }
<section id="strengths" class="py-3">
  <div class="container">
    <h2 class="main-heading">My Strengths</h2>
    <div class="primary">
      <div class="wrapper">
        <h3 class="sub-heading">Strategic Thinking</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
      </div>
      <i class="fas fa-chess-pawn fa-3x">icon</i>
    </div>
    <br><br>
    <div class="primary">
      <div class="wrapper">
        <h3 class="sub-heading">Analysis</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
        </div>
      <i class="far fa-play-circle fa-3x">icon</i>
    </div>
  </div>
</section>