CSS/HTML语音泡泡

Question

在html/css中执行以下“语音泡泡”的最佳方法是什么？

谢谢！

Answer 1

这里是你想要什么的jsfiddle

http://jsfiddle.net/CDksf/4/

CSS：

.bubble_wrap { 
    overflow: auto; 
    width: 520px; 
    margin-bottom: 10px; 
    float: left; 
} 
.bubble_wrap .bubble_image { 
    float: left; 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    margin-right: 20px; 
} 
.bubble_wrap .bubble_content { 
    width: 400px; 
    height: 100px; 
    background-color: blue; 
    float: right 
} 
.bubble_wrap.bubble_right { 
    float: right; 
} 
.bubble_wrap.bubble_right .bubble_image { 
    float: right; 
    margin-right: 0px; 
    margin-left: 20px; 
} 
.bubble_wrap.bubble_right .bubble_content { 
    float: left; 
} 

HTML：

<div class="bubble_wrap"> 
    <div class="bubble_image"></div> 
    <div class="bubble_content"></div> 
</div> 
<div class="bubble_wrap bubble_right"> 
    <div class="bubble_image"></div> 
    <div class="bubble_content"></div> 
</div> 
<div class="bubble_wrap"> 
    <div class="bubble_image"></div> 
    <div class="bubble_content"></div> 
</div>