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

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

WBOY
Freigeben: 2016-06-24 11:29:16
Original
1208 Leute haben es durchsucht

浮动子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>
Nach dem Login kopieren

 

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage