如何將圖標放在標題的右側？

我想佈局看起來像這樣，但也是響應式（以便標題+段落都保持位於圖標的左側）。如何將圖標放在標題的右側？

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

如何將圖標放在標題的右側？

回答

相關問題