css3 - 自適應高度問題
問題描述
如何在父級p高度是auto的情況下,子級p為父級p的一半,子級p里面有個圖片高度為60(圖片自己的高度,并沒有給圖片高度)。有沒有實現的可能
問題解答
回答1:確實描述不清,我想改問題但又怕不是題主想問的問題。試著答一下。
首先你要知道,auto、50%、em這樣的關鍵字或相對單位長度是要計算成確切的值(如px)。如果父元素的高度是auto,那么他是根據子元素的高度計算的。
根據題主描述,最容易想到的是:
<p style='height:auto'> <p style='height:50%'></p></p>
你可以試下,這樣不管用,為什么呢?#p1的高度是是根據#p2的高度計算的。而#p2的高度是#p1的一半。這就產生了相互依賴。
而CSS中的相對單位都是根據父元素計算的,em除外,但在這里用不上。
解決方法
如果你的圖片是確定的高度,那么設置為#p2設置確定的padding-top是最簡單的辦法
如果圖片的高度不是確定的,用JS吧。
回答2:問題描述的稍微有點亂、可以編輯一下問題重新說明清楚嗎、還有是用JS實現還是只能用CSS
回答3:以CSS來說,高度auto是由內容撐起的,父與子元素都沒有設置高度,那實際高度就只有那張圖片而已
回答4:總感覺怪怪的!要實現的話通過js獲取子級p的高度h,再設置父p的高度為h*2
(父auto,子級p中只有一張圖片,子p的高度也就都是圖片高度,直接設置父高120)
回答5:不可能,只有不是auto時子才能根據父調整大小
回答6:你這不是雞生蛋還蛋生雞的問題么
回答7:都沒高度的話,子p就是圖片高度
回答8:可以通過js先獲取圖片的高度,再設置子p和父p的高度
相關文章:
1. Docker for Mac 創建的dnsmasq容器連不上/不工作的問題2. docker安裝后出現Cannot connect to the Docker daemon.3. css - 定位為absolute的父元素中的子元素 如何設置在父元素的下面?4. java - 請問在main方法中寫成對象名.屬性()并賦值,與直接參參數賦值輸錯誤是什么原因?5. java - Spring boot 讀取 放在 jar 包外的,log4j 配置文件,系統有創建日志文件,不寫入日志信息。6. mysql里的大表用mycat做水平拆分,是不是要先手動分好,再配置mycat7. java - socket類服務端如何防止被ddos攻擊?8. javascript - 圖片鏈接請求一直是pending狀態,導致頁面崩潰,怎么解決?9. python - beautifulsoup獲取網頁內容的問題10. 怎么用css截取字符?
