html - 如何将对象设置在同一行(对齐)？

Question

我有说它的气泡和图标。
如您所见，此图标出现在下一个新行中。
如何将它们放在同一行中？A 是戴眼镜的人，B 是鸣叫鸟。

如何修复我的 CSS？

演示 http://jsfiddle.net/4Tyey/

HTML

<span id="chat">
  <span id="comment_645">
        <div class="me_icon">
          <p class="responsive-img">  
        <a href="/user/1"><img alt="X50" class="img-polaroid" src="http://t1.gstatic.com/images?q=tbn:ANd9GcTHwJFqUSlCJvXdCKEQ9dPxPhx_FYOcbQqD_Hco7vTSwEK_eVpnD-qTWcBCmg" style="width: 50px; height: 50px" /></a>
            </p>
        </div>
        <div class="bubble me">
    18:03:02：<a href="/user/1">Person A</a><br />
    hi
        </div>
    </span>
  <span id="comment_644">
        <div class="me_icon">
            <p class="responsive-img">  
        <a href="/user/1"><img alt="X50" class="img-polaroid" src="http://t1.gstatic.com/images?q=tbn:ANd9GcTHwJFqUSlCJvXdCKEQ9dPxPhx_FYOcbQqD_Hco7vTSwEK_eVpnD-qTWcBCmg" style="width: 50px; height: 50px" /></a>
            </p>
        </div>
        <div class="bubble me">
            17:54:43：<a href="/user/1">Person A</a><br />
    hey
        </div>
    </span>
    <span id="comment_643">
        <div class="me_icon">
            <p class="responsive-img">  
                <a href="/user/1"><img alt="X50" class="img-polaroid" src="http://t1.gstatic.com/images?q=tbn:ANd9GcTHwJFqUSlCJvXdCKEQ9dPxPhx_FYOcbQqD_Hco7vTSwEK_eVpnD-qTWcBCmg" style="width: 50px; height: 50px" /></a>
            </p>
        </div>
        <div class="bubble me">
            17:54:00：<a href="/user/1">Person A</a><br />
            woohoo
        </div>
    </span>
  <span id="comment_642">
        <div class="me_icon">
            <p class="responsive-img">  
                <a href="/user/1"><img alt="X50" class="img-polaroid" src="http://t1.gstatic.com/images?q=tbn:ANd9GcTHwJFqUSlCJvXdCKEQ9dPxPhx_FYOcbQqD_Hco7vTSwEK_eVpnD-qTWcBCmg" style="width: 50px; height: 50px" /></a>
            </p>
        </div>
        <div class="bubble me">
            21:15:25：<a href="/user/1">Person A</a><br />
            ok
        </div>
    </span>
    <span id="comment_641">
        <div class="me_icon">
            <p class="responsive-img">  
                <a href="/user/1"><img alt="X50" class="img-polaroid" src="http://t1.gstatic.com/images?q=tbn:ANd9GcTHwJFqUSlCJvXdCKEQ9dPxPhx_FYOcbQqD_Hco7vTSwEK_eVpnD-qTWcBCmg" style="width: 50px; height: 50px" /></a>
            </p>
        </div>
        <div class="bubble me">
            20:47:34：<a href="/user/1">Person A</a><br />
            Howdy
      </div>
    </span>
    <span id="comment_638">
        <div class="bubble you">
            20:36:49：<a href="/user/2">Person B</a><br />
            hello
        </div>
        <div class="you_icon">
            <p class="responsive-img">
                <a href="/user/2"><img alt="2011-08-16_20.01.51" class="img-polaroid" src="http://www.miraiha.net/wpblog/wp-content/uploads/2010/10/designreviver-free-twitter-social-icon.jpg" style="width: 50px; height: 50px" /></a>
            </p>
        </div>
    </span>
    <span id="comment_634">
        <div class="me_icon">
            <p class="responsive-img">  
                <a href="/user/1"><img alt="X50" class="img-polaroid" src="http://t1.gstatic.com/images?q=tbn:ANd9GcTHwJFqUSlCJvXdCKEQ9dPxPhx_FYOcbQqD_Hco7vTSwEK_eVpnD-qTWcBCmg" style="width: 50px; height: 50px" /></a>
            </p>
        </div>
        <div class="bubble me">
            13:48:48：<a href="/user/1">Person A</a><br />
            How's this?
        </div>
    </span>
    <span id="comment_633">
        <div class="me_icon">
            <p class="responsive-img">  
                <a href="/user/1"><img alt="X50" class="img-polaroid" src="http://t1.gstatic.com/images?q=tbn:ANd9GcTHwJFqUSlCJvXdCKEQ9dPxPhx_FYOcbQqD_Hco7vTSwEK_eVpnD-qTWcBCmg" style="width: 50px; height: 50px" /></a>
            </p>
        </div>
        <div class="bubble me">
          13:48:29：<a href="/user/1">Person A</a><br />
          test
        </div>
    </span>
    <span id="comment_631">
        <div class="me_icon">
            <p class="responsive-img">  
                <a href="/user/1"><img alt="X50" class="img-polaroid" src="http://t1.gstatic.com/images?q=tbn:ANd9GcTHwJFqUSlCJvXdCKEQ9dPxPhx_FYOcbQqD_Hco7vTSwEK_eVpnD-qTWcBCmg" style="width: 50px; height: 50px" /></a>
            </p>
        </div>
        <div class="bubble me">
            13:25:55：<a href="/user/1">Person A</a><br />
            hello
        </div>
    </span>
    <span id="comment_630">
        <div class="me_icon">
            <p class="responsive-img">  
                <a href="/user/1"><img alt="X50" class="img-polaroid" src="http://t1.gstatic.com/images?q=tbn:ANd9GcTHwJFqUSlCJvXdCKEQ9dPxPhx_FYOcbQqD_Hco7vTSwEK_eVpnD-qTWcBCmg" style="width: 50px; height: 50px" /></a>
            </p>
        </div>
        <div class="bubble me">
            13:00:33：<a href="/user/1">Person A</a><br />
            Nice to know you
        </div>
    </span>
</span>

CSS

.chat {
    width: 100%;
    text-align: center;
    display:inline-block;

}

.bubble{
    background-color: #FFFFFF;
    border-radius: 5px;
    box-shadow: 0 0 6px #B2B2B2;
    display: inline-block;
    padding: 10px 18px;
    position: relative;
    vertical-align: top;
    word-break: break-all;
}

.bubble::before {
    background-color: #FFFFFF;
    content: "\00a0";
    display: block;
    height: 16px;
    position: absolute;
    top: 11px;
    transform:             rotate( 29deg ) skew( -35deg );
        -moz-transform:    rotate( 29deg ) skew( -35deg );
        -ms-transform:     rotate( 29deg ) skew( -35deg );
        -o-transform:      rotate( 29deg ) skew( -35deg );
        -webkit-transform: rotate( 29deg ) skew( -35deg );
    width:  20px;

}

.me {
    float: center;   
    margin: 5px 10px 5px 5px;
    width: 85%;
    text-align: left;   
}

.me_icon {
    float: left;   
    margin: 5px 10px 5px 5px;
    width: 85%;
    text-align: left;    
}

.me::before {
    box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
    left: -9px;           
}

.you {
    float: center;    
    margin: 5px 10px 5px 5px;
    width: 85%;
    text-align: left;          
}

.you_icon {
    float: right;    
    margin: 5px 10px 5px 5px;
    width: 85%;
    text-align: right;          
}

.you::before {
    box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );
    right: -9px;   
}

我想要的输出

       ____________________
IconA < 20:47:34: Person A |
       | Howdy             |
       |___________________|
        ____________________ 
       | 20:36:49: Person B |
       | hello ?             > IconB
       |____________________|

不是这样的

       ____________________
IconA < 20:47:34: Person A |
       | Howdy             |
       |___________________|
 ____________________ 
| 20:36:49: Person B |
| hello ?             > IconB
|____________________|

Answer 1

要完全实现这一点，您还需要更改您的 html 结构。使用百分比大小不是一个好主意。

参见 DEMO here

HTML

<div id="chat">
 <div id="comment_641">
            <div class="me_icon">
                <p class="responsive-img">  
        <a href="/user/1"><img alt="X50" class="img-polaroid" src="http://t1.gstatic.com/images?q=tbn:ANd9GcTHwJFqUSlCJvXdCKEQ9dPxPhx_FYOcbQqD_Hco7vTSwEK_eVpnD-qTWcBCmg" style="width: 50px; height: 50px" /></a>
</p>
            </div>
            <div class="bubble me">
            20:47:34：<a href="/user/1">Person A</a><br />
            Howdy
            </div>
    </div>
 <div id="comment_638">
   <div class="you_icon">
                <p class="responsive-img">  
        <a href="/user/2"><img alt="2011-08-16_20.01.51" class="img-polaroid" src="http://www.miraiha.net/wpblog/wp-content/uploads/2010/10/designreviver-free-twitter-social-icon.jpg" style="width: 50px; height: 50px" /></a>
</p>
            </div>
            <div class="bubble you">
               20:36:49：<a href="/user/2">Person B</a><br />
            hello
            </div>

    </div>
</div>

CSS

.聊天{ 宽度:100%； 文本对齐:居中； 显示:内联 block ；

}    
.bubble{
    background-color: #FFFFFF;
    border-radius: 5px;
    box-shadow: 0 0 6px #B2B2B2;
    padding: 10px 18px;
    position: relative;
    vertical-align: top;
    word-break: break-all;
  margin-left:89px;
  margin-right:89px;
  margin-top:10px;
  margin-bottom:10px;
}    
.bubble::before {
    background-color: #FFFFFF;
    content: "\00a0";
    display: block;
    height: 16px;
    position: absolute;
    top: 11px;
    transform:             rotate( 29deg ) skew( -35deg );
        -moz-transform:    rotate( 29deg ) skew( -35deg );
        -ms-transform:     rotate( 29deg ) skew( -35deg );
        -o-transform:      rotate( 29deg ) skew( -35deg );
        -webkit-transform: rotate( 29deg ) skew( -35deg );
    width:  20px;

}
.me {
    float: center;   
    text-align: left;   
}    
.me_icon {
    float: left;   
    margin: 5px 10px 5px 5px;
    text-align: left;    
}    
.me::before {
    box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
    left: -9px;           
}    
.you {
    float: center;    
    text-align: left;          
}
.you_icon {
    float: right;    
    margin: 5px 10px 5px 5px;
    text-align: right;          
}   
.you::before {
    box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );
    right: -9px;   
}