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;属性的图像。

.floatImg { float: left;}

然后将其应用于图像，

<img class="floatImg">

为了向您展示一个小例子，我所做的就是为您的图像现有类添加一个浮点数。＆＃34;但你应该创建一个新的＆＃34;。然后我将h4移动到图像上方，以便<p>包裹。将此应用到项目后，您可以应用更多css以使其看起来更好。

Padding / margin等

Bootstrap

幸运的是，您正在使用bootstrap。所以为了更进一步，你可以使用很多选项来使这看起来更好。 Bootstrap使您能够使用columns和rows。

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

bootstrap 2 col的示例

<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>

＆＃13;

#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;
  }

＆＃13;

<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>

＆＃13;

Answer 2

<div>的内容将转到下一行，在它之前添加一个中断。我会考虑将布局组织为<table>，左侧为<td>，图片为<td>，右侧为Angular Material，用于说明和社交媒体的链接。

如何在文本旁边对齐文本div？

2 个答案: