div根據父元素根據子元素高度自適應高度

2022-08-22 23:42:07 字數 791 閱讀 2028

切圖時經常遇見一種問題:

父級的div高度為0,導致後面緊跟著的元素串位。(特別是在使用bootstrap布局的時候)以前都是通過該margin調整

兩種情況(無特殊說明子元素都是指代父元素的第一級子元素)

第一種:若子元素沒有帶有float元素的元素,對於高度是自適應的沒有問題.

第二種:若子元素全是帶有float屬性的元素,這時候我們會發現父元素塌陷,高度為0,因為float浮動元素脫離了正常的文件流,父元素相當於沒有了這兩個兒子!

解決這個問題的根源就是清除浮動

1 , 給父節點增加樣式overflow:hidden或者overflow:auto 

2 , 在子元素中的最後乙個新增乙個兄弟節點,當然該節點應該是乙個空節點.你可以用div或者br

div>

貼士

發現乙個更好的一種方式,就是使用偽元素來達到這種效果,在父元素上增加乙個:after偽元素,像這樣

div::after 

我看medium上面的一篇文章,是這樣來清除浮動的。from now on , i will take this

.container::before, .container::after 

.container::after

子元素div高度不確定時父div高度如何自適應

點評 每當進行頁面布局時,我們都有這樣的需求,就是當子元素div高度不確定時父div自適應高度,本文整理的多種方法可以解決此問題,感興趣的朋友可以參考下 在最外層div加以下樣式 height 100 overflow hidden 其它方法 div即父容器不根據內容自適應高度,我們看下面的 複製 ...

jquery怎麼根據指定元素刪除父元素

在jquery中,可以使用unwrap 方法來根據指定元素刪除其父元素,該方法可以移除被選元素的父元素,但會保留自身在原來的位置 語法 selector unwrap 本教程操作環境 windows7系統 jquery1.10.2版本 dell g3電腦。在jquery中,可以使用unwrap 方法...

子元素定位,父元素高度自適應

現象 子元素用了position,脫離文件流,導致父元素沒有高度。解決方案 1.把子元素改成浮動布局,給父元素加上overflow屬性 overflow auto 2.在對應的子元素上,新增相同寬高的兄弟元素,該元素去掉position屬性,把定位元素的top值換成margin或padding值。b...