我该如何放置图像的文字右侧？

这是怎么出来的。

，这是我的代码。

<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

我该如何放置图像的文字右侧？

回答

相关问题