教程：http://m.blog.csdn.net/blog/yhc13429826359/38778337

寫的很好。自己實現(xiàn)的時候，由于img float:left，會脫離文檔流，導致結構混亂。

學到的知識是：clear:both；

清除當前定義的元素左右浮動
諸如：
clear:left;   //清除左浮動
clear:right;  //清除右浮動
clear:both;  //清除左右兩邊浮動

自己敲后的代碼

@charset 'utf-8';

.con{
	200px;
	height:400px;
	background-color:#f8f8f8;
	.item{
		clear:both;
		.image-con{	
			float:left;
			img{
				50px;
				height:50px
			}
		}
		.msg-con{
			background-color: olive;
			float:left;
			margin:0 20px 10px 15px;
			padding:10px;
			padding-left:0;
			border-radius:7px;
			img{
				50px;
				height:50px
			}
		}
	}
}

html

<div class='con'>
    <div class='item'>
      <div class='image-con'>
        <img src='chrome.png' />
      </div>
      <div class='msg-con'>
        <span>message</span>
      </div>
    </div>

    <div class='item'>
      <div class='image-con'>
        <img src='chrome.png' />
      </div>
      <div class='msg-con'>
        <span>message</span>
      </div>
    </div>

    <div class='item'>
      <div class='image-con'>
        <img src='chrome.png' />
      </div>
      <div class='msg-con'>
        <span>message</span>
      </div>
    </div>
</div>

.item 的高度還是0，但是它會正常的排好。

總結

以上是生活随笔為你收集整理的html5 实现qq聊天的气泡效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。