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>
  • 相关阅读:
    @Autowired 与@Resource的区别(详细)
    mvn clean compile package install deploy
    Android Studio 之 NDK篇
    cmake处理多源文件目录的方法
    linux CMakeLists.txt 语法
    在 Android Studio 2.2 中愉快地使用 C/C++
    MySql 模糊查询
    C++静态库与动态库详解
    配置Yum源repo文件及搭建本地Yum服务器
    yum命令
  • 原文地址:https://www.cnblogs.com/hello-word1/p/5137395.html
Copyright © 2011-2022 走看看