如何将图标放在标题的右侧？

Question

我希望布局看起来如此，但也要响应（这样标题+段落都保持位于图标的左侧）。

CSS：

.feature {
  position: relative;
  border: 1px solid #000;
}

.circle {
  height: 2.5rem;
  width: 2.5rem;
  background-color: #64beeb;
  border-radius: 50%;
  float: right;
}

.icon {
  font-size: 1.75rem;
  color: #fff;
}

HTML：

<div class="feature">
  <div class="text text-right">
    <p class="h2">Diversity of Content</p>
    <p class="descrip">Dive deep and share themed content across various topics based on your audience</p>
  </div>
  <div class="circle text-center">
    <i class="icon ion-android-bulb"></i>
  </div>
</div>

CODEPEN DEMO

Answer 1

将其添加到.circle并移除float:right;然后它将完全位于父relative容器中。

  position: absolute;
  top: 10px;
  right: 10px;

＆＃13;

＆＃13;

.feature {
  position: relative;
  border: 1px solid #000;
}

.circle {
  position: absolute;
  top: 10px;
  right: 10px;
  height: 2.5rem;
  width: 2.5rem;
  background-color: #64beeb;
  border-radius: 50%;
}

.icon {
  font-size: 1.75rem;
  color: #fff;
}

＆＃13;

<div class="feature">
  <div class="text text-right">
    <p class="h2">Diversity of Content</p>
    <p class="descrip">Dive deep and share themed content across various topics based on your audience</p>
  </div>
  <div class="circle text-center">
    <i class="icon ion-android-bulb"></i>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

您可以将padding-right: 50px;添加到.feature，以便图标（蓝色圆圈）不会覆盖文字。见https://jsfiddle.net/ymzofeph/

Answer 2

         <div class="feature">
            <div class="circle text-center">
                <i class="icon ion-android-bulb"></i>
              </div>
              <div class="text text-right">
                <p class="h2">Diversity of Content</p>
                <p class="descrip">Dive deep and share themed content across various topics based on your audience</p>
              </div>
         </div>
         <style>
          .circle{
             float:right;
             width:40px;
             height:40px;
             margin:0 0 0 20px;
          }
          .text{
             overflow:hidden;
          }
         </style>

Answer 3

一种选择是使用flexbox。您可以将display: flex添加到容器（.feature）。将flex: 1添加到文本中。要在图标周围创建一些空间，您可以使用您认为合适的margin值。

＆＃13;

＆＃13;

.feature {
  position: relative;
  border: 1px solid #000;
  /* for demo */
  text-align: right;
  display: flex;
}

.text {
  flex: 1;
}

.circle {
  height: 2.5rem;
  width: 2.5rem;
  background-color: #64beeb;
  border-radius: 50%;
  margin: 1rem;
}

.icon {
  font-size: 1.75rem;
  color: #fff;
}

＆＃13;

<div class="feature">
  <div class="text text-right">
    <p class="h2">Diversity of Content</p>
    <p class="descrip">Dive deep and share themed content across various topics based on your audience</p>
  </div>
  <div class="circle text-center">
    <i class="icon ion-android-bulb"></i>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

将float:right div放在.text-right div之前。然后将padding-right:2.5rem;添加到.text-right div。

Example