Css Trick - 如何对齐这个 div答案

【问题标题】：Css Trick - How to align this divCss Trick - 如何对齐这个 div
【发布时间】：2014-02-09 03:00:49
【问题描述】：

我有以下对齐方式：

<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>“user-chat-status”右对齐。我想要以绿色显示的图像，是<DIV> 或<SPAN>。我究竟做错了什么？

JSFiddle

【问题讨论】：

标签： css alignment vertical-alignment html

【解决方案1】：

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

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

不过，Radu Celariu 的想法更好。我在不使用额外跨度的情况下一起粉碎了一个工作示例，请在此处查看：http://jsfiddle.net/3PduX/22/

它使用:after 伪元素。

【讨论】：

【解决方案2】：

如果你一个接一个地使用两个分区，你可以使用 clear:both;在当前的 div 中。如果要将 div 向右对齐，可以使用 . 我希望它会起作用。

【讨论】：

感谢朋友的回复，但似乎我们已经有了上面的东西！拥抱！

【解决方案3】：

嘘，时髦。 UI 的图像很愚蠢。这就是我们有伪元素的原因！

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

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

干杯！

【讨论】：