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>