html - 如何将我的文本 div 对齐到我的图像旁边？

Question

我需要在图片旁边显示文字。带有社交链接的图像信息需要位于图像下方。我试过 clearfix 代码，但没有任何结果有效。我正在使用 bootstrap 构建，我可能会遗漏一些简单的东西，因此我将所有 html 都留在了里面，以防我移动了一些东西(尽管我看不到我做了什么)。尽管我也有全局代码(此处未添加)，但我也包含了特定的 css。有什么建议吗？

#team {
  padding: 60px 0;
  text-align: center;
}
#team h2 {
  text-transform: uppercase;
}
#team .team {
  margin-top: 40px;
  margin-bottom: 20px;
}
#team .team h4 {
  margin-top: 20px;
  text-transform: uppercase;
  font-weight: 700;
}
#team .team p {
  color: #a3a3a3;
}
#team .team a {
  color: #0d0d0d;
  font-size: 22px;
  padding-right: 10px;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#team .team a:hover,
#team .team a:focus,
#team .team a:active {
  color: #a3a3a3;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section id="team">
  <div class="container">
    <h2>INFO</h2>
    <hr class="sep">
    <p>MORE INFO</p>
    <div class="row wow fadeInUp" data-wow-delay=".3s">
      <div class="col-md-4">
        <img class="img-responsive center-block" src="IMAGE FILE" alt="THIS IS AN IMAGE">
        <h4>NAME</h4>
        <p>PROFESSION</p>
        <div class="team-social-icons">
          <a href="***" target="_blank"><i class="fa fa-facebook"></i></a>
          <a href="***" target="_blank"><i class="fa fa-twitter"></i></a>
          <a href="***" target="_blank"><i class="fa fa-instagram"></i></a> 
        </div>
      </div>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
  </div>
</section>

Answer 1

问题

将文本与图像的一侧对齐。

解决方案

如果您希望文本位于图像的一侧，您需要添加 float到图像。

您的代码将需要更多的 css 来获得您想要的完整结果，但是为了让您继续前进，您应该创建一个类来添加到图像中，该类将具有 float: left;属性(property)。

.floatImg { float: left;}

然后将它应用到图像上，

<img class="floatImg">

为了向您展示这方面的一个小示例，我所做的就是向您的图像现有类添加一个 float 。 “但是你应该创建一个新的”。然后我将 h4 移到图像上方，所以 <p>会包裹。将此应用到您的元素后，您可以应用更多 css使它看起来不错。

Padding / margin等等

Bootstrap

幸好您使用的是 bootstrap .因此，为了更进一步，您可以使用这里的许多选项来使它看起来更漂亮。 Bootstrap 使您能够使用 columns和 rows .

因此，如果您知道需要创建一个 2 列的行。 img在一个和另一个文本中，你可以做到这一点。

bootstrap 2 列示例

<div class="row">
    <div class="col-lg-6 col-md-6">
          <img>
    <div>  
    <div class="col-lg-6 col-md-6">
         <p> txt here</p>
    <div>    
</div>

#team {
  padding: 60px 0;
  text-align: center;
}
#team h2 {
  text-transform: uppercase;
}
#team .team {
  margin-top: 40px;
  margin-bottom: 20px;
}
#team .team h4 {
  margin-top: 20px;
  text-transform: uppercase;
  font-weight: 700;
}
#team .team p {
  color: #a3a3a3;
}
#team .team a {
  color: #0d0d0d;
  font-size: 22px;
  padding-right: 10px;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#team .team a:hover,
#team .team a:focus,
#team .team a:active {
  color: #a3a3a3;
}

.img-responsive {
  float: left;
  }

<section id="team">
  <div class="container">
    <h2>INFO</h2>
    <hr class="sep">
    <p>MORE INFO</p>
    <div class="row wow fadeInUp" data-wow-delay=".3s">
      <div class="col-md-4">
<h4>NAME</h4>
        <p>PROFESSION</p>
        <img class="img-responsive center-block" src="IMAGE FILE" alt="THIS IS AN IMAGE">
        
        <div class="team-social-icons">
          <a href="***" target="_blank"><i class="fa fa-facebook"></i></a>
          <a href="***" target="_blank"><i class="fa fa-twitter"></i></a>
          <a href="***" target="_blank"><i class="fa fa-instagram"></i></a> 
        </div>
      </div>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
  </div>
</section>