0

我有说话的泡泡和图标。
如您所见，此图标出现在下一个新行。
如何将它们设置在同一行中？人 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：&lt;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：&lt;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：&lt;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：&lt;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：&lt;a href="/user/1">Person A</a><br />
            Howdy
      </div>
    </span>
    <span id="comment_638">
        <div class="bubble you">
            20:36:49：&lt;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：&lt;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：&lt;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：&lt;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：&lt;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
|____________________|
4

3 回答 3

1

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

在此处查看演示

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：&lt;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：&lt;a href="/user/2">Person B</a><br />
            hello
            </div>

    </div>
</div>

CSS

.chat { 宽度：100%; 文本对齐：居中；显示：内联块；

}    
.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;   
}
于 2013-01-17T17:23:15.973 回答
1

我不确定这是否是你想要的，但你的宽度在我和你的图标上太大了，所以我让它们变小了，将它们的宽度40%改为，85%然后clear:both在你的气泡类上添加一个：

http://jsfiddle.net/4Tyey/1/

于 2013-01-17T16:51:49.383 回答
1

您的图标宽度太宽float:center且不存在。

我相信这就是您正在寻找的：

http://jsfiddle.net/4Tyey/2/

于 2013-01-17T16:58:56.967 回答