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

我想布局看起来像这样，但也是响应式（以便标题+段落都保持位于图标的左侧）。如何将图标放在标题的右侧？

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

来源

2017-10-20 mina cosentino

你可以删除'浮弯曲;'，它自动定位/调整大小子项，以适应并排侧。 *（您可能还需要在'.circle'上放置'flex-shrink：0'，以确保它不会“缩小到合适”。）* – Santi

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

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

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

来源

2017-10-20 15:34:55 sol

认为这个更简单/需要更少的编辑。谢谢！！ –

它添加到.circle和删除float:right;然后，它会从父绝对定位集装箱。

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

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

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

而且你可以添加padding-right: 50px;到.feature所以图标（blueih圈子）不会超过文字。请参阅https://jsfiddle.net/ymzofeph/

来源

2017-10-20 15:32:21 caramba

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

来源

2017-10-20 15:32:55

如果答案对您有帮助，请投票谢谢 –

把float:rightdiv前.text-rightdiv。然后将padding-right:2.5rem;添加到.text-rightdiv。从``.circle`和设置父（`.feature`）为`显示;右：

Example

来源

2017-10-20 15:39:33 smilebomb

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

回答

相关问题