如何将图标放在右侧的图像和段落下？

debugcn 发表于 Dev

安库·辛格·拉杰普特

我正在使用 Bootstrap CSS。如何使用 CSS 制作此样式：

我用过这个内容。这是我得到的结果

html

<div class="container">
<img class="post-thumb" src="https://image.ibb.co/gmbNQT/matthew.png" alt="matthew">
<ul>
    <li>
       <a href="https://github.com/ankul007" target="_blank">
          <i class="fa fa-github-square" style="font-size:48px;color:purple"></i>
       </a>
    </li>
    .
    .
</ul>
<p class="post-content" >...........</p>
</div>

使用这个 css

.post-thumb {
    float: left;
    border-radius: 50%;
    display: inline-block;
    height: 300px;
    widows: 300px;
}

li {
    list-style-type: none;
    display: inline-block;
    margin-right: 30px;
    padding-top: 4px;
    text-align: center;
}
.post-content {
    margin-left: 350px;
    text-align: justify;
}

普拉文·库马尔·普鲁索塔曼

将图标和图像放在一个父级中并将它们向左浮动：

.post-thumb {
  float: left;
}

.post-thumb img {
  border-radius: 50%;
  display: inline-block;
  height: 300px;
  widows: 300px;
}

.post-thumb li {
  list-style-type: none;
  display: inline-block;
  margin-right: 30px;
  padding-top: 4px;
  text-align: center;
  font-size: 48px;
}
.post-content {
  margin-left: 350px;
  text-align: justify;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
  <figure class="post-thumb">
    <img src="https://image.ibb.co/gmbNQT/matthew.png" alt="matthew">
    <ul>
      <li>
        <a href="https://github.com/ankul007" target="_blank">
          <i class="fa fa-github-square"></i>
        </a>
      </li>
      <li>
        <a href="https://github.com/ankul007" target="_blank">
          <i class="fa fa-facebook-square"></i>
        </a>
      </li>
      <li>
        <a href="https://github.com/ankul007" target="_blank">
          <i class="fa fa-twitter-square"></i>
        </a>
      </li>
    </ul>
  </figure>
  <p class="post-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto culpa eaque a laboriosam mollitia nulla tempora ab in autem doloremque praesentium, facilis, assumenda incidunt earum delectus. Sequi suscipit ad voluptates.</p>
</div>

预习