如何在一段右對齊的文本下對齊元素？

所以我想在HTML中做一個用戶評論的事情。我希望它看起來類似於vimeo's註釋，用戶圖標和文本右對齊。這裏是我的標記（使用引導容器，但我真的不認爲這是問題）：如何在一段右對齊的文本下對齊元素？

<div class="comment"> 
<img src="{{comment.poster.profile.avatar.url}}" alt="..."> 
<span><a href="profile link">poster name</a>&nbsp;time</span> 
<p>comment body</p> 
</div>

和我的CSS：

.comment{ 
margin-left: auto; 
margin-right: auto; 
margin-bottom: 10px; 
text-align: left; 
width: 800px; 
padding: 10px; 
    background-color: @secondary; 

img{ 
    width: 55px; 
    height: 55px; 
    vertical-align: top; 
    }

的<span><a href="profile link">poster name</a> time</span>對齊與圖像是多麼的右上方我希望它，但身體文本結束了圖像下，而不是在我想要它的信息。下面是它的一個圖像，箭頭所指之處我想要的文字去：

enter image description here

任何想法，我應該怎麼做呢？我在調整事情方面真的很糟糕，所以很抱歉如果這是一個簡單的錯誤。謝謝。

來源

2014-05-04 jack

你看看CSS'浮動：right'？您可以將該圖像以div和文本添加到另一個div中。然後看看爲div應用'float：right'。 –

這裏是你如何CANC實現這一目標：

<div class="pic"> <img src="http://placekitten.com/100/100"> </div> <div class="pic-meta"> <span> <a href="profile link">poster name</a>  time </span> <span class="comment">comment</span> </div>

和css：

.pic, .pic-meta { float: left; } .comment { display: block; }

http://jsfiddle.net/p4K7u/

來源

2014-05-04 05:38:23 geryjuhasz

如何在一段右對齊的文本下對齊元素？

回答

相關問題