首页  >  文章  >  web前端  >  html中子div用了浮动怎样让父div的大小自动撑开_html/css_WEB-ITnose

html中子div用了浮动怎样让父div的大小自动撑开_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 11:29:161199浏览

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

(1)在父div中在添加一个清除浮动的子div

,该div不设置任何样式,只用来清除浮动

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

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

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

(5)在父div中添加
子元素

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

     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>

 

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn