Wie positioniere ich das Symbol rechts neben der Überschrift?

Question

Ich möchte das Layout so aussehen, aber auch reagieren (so dass die Überschrift + Absatz sowohl auf der linken Seite des Symbols positioniert bleiben).

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

Eine Option ist flexbox zu verwenden. Sie können dem Container display: flex hinzufügen (.feature). Fügen Sie dem Text flex: 1 hinzu. Um etwas Platz um das Symbol herum zu schaffen, können Sie einen margin Wert verwenden, den Sie für geeignet halten.

.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

dies .circle hinzufügen und entfernen float:right; Dann wird es absolut von der übergeordnetenpositioniert werdenBehälter.

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>

Und man konnte padding-right: 50px;-.feature so das Symbol (blueih Kreis) nicht über den Text sein hinzuzufügen. Sehen Sie hier 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

die float:rightdiv vor der .text-rightdiv Put. Dann fügen Sie padding-right:2.5rem; zu .text-rightdiv hinzu.

Example