zoukankan      html  css  js  c++  java
  • html中子div用了浮动怎样让父div的大小自动撑开(清除浮动)

    浮动子div撑开父div的几种方法:

    (1)在父div中在添加一个清除浮动的子div<div style=" clear:both;"></div>,该div不设置任何样式,只用来清除浮动

    (2)在父div的css样式中设置overflow:hidden;zoom:1;

    (3)设置父div也为浮动元素float:left;,这样设置的坏处是不能用margin:auto;实现居中

    (4)设置父元素display:inline-block;,这样设置的坏处是不能用margin:auto;实现居中

    (5)在父div中添加<br clear="both">子元素

    (6)给父元素引用clearfix样式(未试过)

      clearfix{

        zoom:1;

      }

      clearfix:after{

        content:"";

        display:block;

        claer:both;

      }

    小结:用哪一种方法根据自身情况来使用。

    参考原文地址:http://www.jb51.net/css/173074.html

         http://www.jb51.net/article/43261.htm

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4  <meta charset="UTF-8">
     5  <title>HTML5 Canvas画印章</title>
     6  <style>
     7     .divCss{
     8       position: relative;
     9       width: 1024px;
    10       height: auto;
    11       border: 1px solid #999999;
    12       margin:auto;
    13       /*display:inline-block;*/
    14       /*float: left;*/
    15       /*overflow: hidden;
    16          zoom:1;*/
    17     }
    18     .style{
    19       position: relative;
    20       width: 300px;
    21       height: 400px;
    22       float: left;
    23       border: 1px solid #aaaaaa;
    24       margin:10px;    
    25     }
    26  </style>
    27 </head>   
    28 <body>
    29   <div class="divCss">
    30     <div class="style"></div>
    31     <div class="style"></div>
    32     <div class="style"></div>
    33     <div style=" clear:both;"></div> 
    34   </div>
    35 </body>
    36 </html>
  • 相关阅读:
    typescript
    pyqt5窗口跳转
    pyqt5 列表内添加按钮
    C#窗体最大化,其他控件调整
    C#禁止程序重复打开
    C#添加 mysql.data.dll
    宝塔一键ssl
    宝塔Linux面板 使用阿里云OSS备份数据
    CentOS7使用firewalld打开关闭防火墙与端口
    使用babel编译es6
  • 原文地址:https://www.cnblogs.com/hello-word1/p/5137395.html
Copyright © 2011-2022 走看看