Home > Web Front-end > HTML Tutorial > html中子div用了浮动怎样让父div的大小自动撑开_html/css_WEB-ITnose

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

WBOY
Release: 2016-06-24 11:29:16
Original
1205 people have browsed it

浮动子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>
Copy after login

 

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template