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>