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>
  • 相关阅读:
    剑指offer---尾到头打印链表
    剑指offer---链表中环的入口结点
    剑指offer---删除链表中重复的结点2
    剑指offer---删除链表中重复的结点
    6.shap以及selector的使用
    7.进度条(ProgressBar)
    5.toogleButton以及Switch
    4.基础控件
    3.触摸事件
    2.点击事件和页面切换
  • 原文地址:https://www.cnblogs.com/hello-word1/p/5137395.html
Copyright © 2011-2022 走看看