zoukankan      html  css  js  c++  java
  • CSS外框高度自动适应

    当有浮动float时,最外框会不跟随内容的高度而高;

    解决办法一:
    清除浮动  clear:both

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            *{margin:0px;padding:0px;}
            .wrap{background:red;1000px;margin:auto;}
            .left,.right{float:left;height:50px;}
            .left{960px;background:red;}
            .right{40px;background:green;}
            .clear{clear:both;}
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="left"></div>
            <div class="right"></div>
            <div class="clear"></div>
        </div>
    </body>
    </html>
    

     解决办法二:
    给最外框加 overflow:hidden; zoom:1;

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            *{margin:0px;padding:0px;}
            .wrap{background:red;1000px;margin:auto;overflow:hidden; zoom:1;}
            .left,.right{float:left;height:50px;}
            .left{960px;background:red;}
            .right{40px;background:green;}
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </body>
    </html>
    

      解决办法三:
    给外框加属性 content: "";display: table;line-height: 0;clear: both;

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            *{margin:0px;padding:0px;}
            .wrap:before, .wrap:after {content: "";display: table;line-height: 0;clear: both;}
            .wrap:after {clear: both;}
            .wrap {margin: 0 auto; 1000px;}
            .left,.right{float:left;height:50px;}
            .left{960px;background:red;}
            .right{40px;background:green;}
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </body>
    </html>
    

     

    CSS最小高度与自适应高度并存

    div{_height:200px; min-height:200px 
    /* 注释:两个放置不分前后顺序,兼容所有浏览器 */} 
    

     

  • 相关阅读:
    TCP与UDP
    DNS的概念,用途,DNS查询的实现算法
    子网划分的概念,子网掩码
    ping的原理以及ICMP
    组播和广播的概念,IGMP的用途
    ICMP协议
    RIP协议
    MTU的概念,什么是路径MTU? MTU发现机制,TraceRoute(了解)
    TFTP 与 FTP的区别
    vue slot slot-scope
  • 原文地址:https://www.cnblogs.com/sntetwt/p/3896265.html
Copyright © 2011-2022 走看看