zoukankan      html  css  js  c++  java
  • 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{
    	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,但是它会正常的排好。

  • 相关阅读:
    驾照更换说明
    批处理创建快捷方式
    AC中保存数据与查询数据
    logger日志模块
    如何将python脚本转化为exe
    numpy学习
    request是个什么东西
    django的test文件的使用方式
    高频正则表达式
    dir 的作用
  • 原文地址:https://www.cnblogs.com/wang-jing/p/4930248.html
Copyright © 2011-2022 走看看