Comment positionner l'icône à droite du titre?

Question

Je voudrais que la mise en page ressemble à cela, mais soyez également sensible (de sorte que l'en-tête et le paragraphe restent tous les deux positionnés à gauche de l'icône).

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

Une option consiste à utiliser flexbox. Vous pouvez ajouter display: flex au conteneur (.feature). Ajoutez flex: 1 au texte. Pour créer de l'espace autour de l'icône, vous pouvez utiliser une valeur margin qui vous convient.

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

Answer 2

ajouter à .circle et enlever float:right; Ensuite, il sera en position absolue du parent relative conteneur.

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>

Et vous pouvez ajouter padding-right: 50px;-.feature si l'icône (cercle blueih) ne sera pas sur le texte. Voir ici https://jsfiddle.net/ymzofeph/

Answer 3

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

Mettre le float:rightdiv avant la .text-rightdiv. Puis ajoutez padding-right:2.5rem; au .text-rightdiv.

Example