zoukankan      html  css  js  c++  java
  • 随机 css

    1.清除浮动的几种方式

      (1: 浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)

    <style type="text/css"> 
       .div1{background:#000080;border:1px solid red;}
       .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
       
       .left{float:left;width:20%;height:200px;background:#DDD}
       .right{float:right;width:30%;height:80px;background:#DDD}
       
       /*清除浮动代码*/
       .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
       .clearfloat{zoom:1}
       </style> 
    <div class="div1 clearfloat"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
    </div>
    <div class="div2">
       div2
    </div>

      (2: 添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度

    <style type="text/css"> 
       .div1{background:#000080;border:1px solid red}
       .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
       
       .left{float:left;width:20%;height:200px;background:#DDD}
       .right{float:right;width:30%;height:80px;background:#DDD}
       
       /*清除浮动代码*/
       .clearfloat{clear:both}
       </style> 
    <div class="div1"> 
    <div class="left">Left</div> 
    <div class="right">Right</div>
    <div class="clearfloat"></div>
    </div>
    <div class="div2">
       div2
    </div>
  • 相关阅读:
    PHP 魔术函数
    创建静态链接库
    Linux C 子进程的调度
    Android开发(三) android布局
    谷歌(Google)算法面试题
    Android开发(二) 详细了解android开发
    制作makefile文件
    SHELL编程
    5 Rules For A Good Web Design
    非托管代码方法的命名约定
  • 原文地址:https://www.cnblogs.com/web-chuan/p/10999364.html
Copyright © 2011-2022 走看看