Heim >Web-Frontend >HTML-Tutorial >使用float属性布局时父元素高度不能自适应的解决方法_html/css_WEB-ITnose
使用float属性布局时父元素高度不能自适应的解决方法_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:28:391656Durchsuche
在网页的布局过程中，经常会用到float属性来实现页面的左右布局，但是有个问题就是父元素的高度并不能根据子元素的高度自适应。比如下面这段代码：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>title</title></head><body> <div align="center" style="border: 1px solid blue;"> p <div style="float:left;width:45%;height:200px;border: 1px solid green;"> left </div> <div style="float:right;width:45%;height:150px;border: 1px solid red;">right</div> </div></body></html>
在浏览器中查看效果如下：
在有些情况下，我们需要父元素能够根据子元素的高度进行自适应，这时候你只需要给父div加个overflow:hidden就可以了。譬如：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>title</title></head><body> <div align="center" style="border: 1px solid blue;overflow:hidden;"> p <div style="float:left;width:45%;height:200px;border: 1px solid green;"> left </div> <div style="float:right;width:45%;height:150px;border: 1px solid red;">right</div> </div></body></html>
这样父元素的高度就能根据子元素的高度自适应了。在浏览器中查看效果如下：
Stellungnahme：
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
Vorheriger Artikel：W3School-CSS 伪元素 (Pseudo-elements) 实例_html/css_WEB-ITnoseNächster Artikel：纯css3手机页面图标样式代码_html/css_WEB-ITnose