我該如何放置圖像的文字右側？

這是怎麼出來的。

，這是我的代碼。

<div class="info_1"><img src="images/xe_icon_2.png"><span>Powered by XE</span></div>

現在，我確實給了一些CSS樣式。

.info_1 { 
    display: inline; 
    clear:right; 
} 

.info_1 span{ 
    font-size: 20px; 
    line-height: 100px; 
}

我該如何讓文字出現在圖像的右上方？

來源

2015-11-20 Mark

怎麼樣把它的圖像之前：

<div class="info_1"> 
    <span>Powered by XE</span> 
    <img src="images/xe_icon_2.png"> 
</div>

和修改CSS一點（你不需要該行高度）。

或者，您可以保留當前標記，並使該跨度絕對定位，然後使用top和right CSS規則對其位置進行微調。

下面是一個例子：

#ctn { 
 
    width: 300px; 
 
    background: #eee; 
 
    position: relative; 
 
    box-shadow: 0px 0px 12px #aaa; 
 
} 
 
.info_1 { 
 
    display: inline; 
 
    clear: right; 
 
} 
 
.info_1 span { 
 
    font-size: 20px; 
 
    position: absolute; 
 
    top: 16px; 
 
    right: 10px; 
 
} 
 
.info_1 img { 
 
    margin: 20px 4px; 
 
}

<div id="ctn"> 
 
    <div class="info_1"> 
 
    <span>Powered by XE</span> 
 
    <img src="https://placehold.it/150x150"> 
 
    </div> 
 
</div>

UPDATE

#main { 
 
    width: 600px; 
 
    background: #eee; 
 
} 
 
#ctn { 
 
    width: 300px; 
 
    margin: auto; 
 
    position: relative; 
 
    background: #999; 
 
} 
 
.info_1 span { 
 
    font-size: 20px; 
 
    position: absolute; 
 
    top: 16px; 
 
    right: 10px; 
 
} 
 
.info_1 img { 
 
    margin: 20px 4px; 
 
}

<div id="main"> 
 
    <div id="ctn"> 
 
    <div class="info_1"> 
 
     <span>Powered by XE</span> 
 
     <img src="https://placehold.it/150x150"> 
 
    </div> 
 
    </div> 
 
</div>

來源

2015-11-20 05:05:06 Shomz

哦。所以你給了上層的相對值，使.info_1跨度不會離開.info_1 div本身？我不知道這是可能的。 – Mark

是的，相對定位的父親可以定位其絕對定位的孩子，以便您知道頂部/底部/左/右值與父代相關。我補充說，因爲我不知道你的其他代碼是什麼樣的。 – Shomz

不錯。但由於某種原因，它不會讓我伸展超出你寫的（300像素）說，如果我給#ctn 1000px寬度，並使跨文本去右：100px或什麼的，它與對齊混亂，並去完全在其他地方。 – Mark

我該如何放置圖像的文字右側？

回答

相關問題