Question

我有以下对齐方式：

<div class="main">
    <div class="header"></div>
    <div class="right-bar">
        <div class="chat-user-content"> 
          <span class="chat-user-photo">
            <img src="http://d13yacurqjgara.cloudfront.net/users/25963/avatars/mini/2013-avatar_(1).png" />
          </span>
            <span class="chat-user-name">Fulano Silva</span>
            <span class="chat-user-status"><img src="http://www.colorhexa.com/a7ba3d.png" /></span>
        </div>
    </div>
</div>

.chat-user-status > img{
    border-radius: 50%;
    height:15px;
    width:15px;
}

但我无法在不使用图片的情况下将<SPAN>“用户聊天状态”对齐。我希望以绿色显示的图片为<DIV>或<SPAN>。我究竟做错了什么？

JSFiddle

Answer 1

检查这个小提琴：http://jsfiddle.net/3PduX/18/

我把display:block放到了跨度上，我认为这可能是你错过的。

Radu Chelariu的想法虽然更好。我在没有使用额外跨度的情况下一起打破了一个工作示例，请在此处查看：http://jsfiddle.net/3PduX/22/

它使用:after伪元素。

Answer 2

如果你一个接一个地使用两个分区，你可以使用clear：both;在当前的div。如果要将div对齐，可以使用。我希望它能奏效。

Answer 3

Pish，豪华。 UI的图像很傻。这就是为什么我们有伪元素！

基本上，您只需要用:after或:before替换图像，并相应地设置样式。这是一个JSFiddle来说明：

http://jsfiddle.net/sickdesigner/N99j3/

干杯！

Css Trick - 如何对齐这个div

3 个答案: