html5 实现qq聊天的气泡效果

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

写的很好。自己实现的时候，由于img float:left，会脱离文档流，导致结构混乱。

学到的知识是：clear:both；

清除当前定义的元素左右浮动

诸如：

clear:left;   //清除左浮动

clear:right;  //清除右浮动

clear:both;  //清除左右两边浮动

自己敲后的代码

@charset 'utf-8';

.con{

	width:200px;

	height:400px;

	background-color:#f8f8f8;

	.item{

		clear:both;

		.image-con{

			float:left;

			img{

				width:50px;

				height:50px

			}

		}

		.msg-con{

			background-color: olive;

			float:left;

			margin:0 20px 10px 15px;

			padding:10px;

			padding-left:0;

			border-radius:7px;

			img{

				width: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聊天的气泡效果

最新文章

热门文章