如何將內部Div 寬度設定為另一個Div 後的剩餘空間
在xHTML 和CSS 中,您可能會遇到需要以下場景:在外部div 內有多個巢狀div,其定義寬度為100%。您希望內部 div 顯示在一行中,第一個 div 的寬度由其內容決定。
要實現此目的,您可以利用以下技術:
步驟1:對嵌套Div 使用內聯顯示
將嵌套的'display' 屬性設定為'inline',以便它們出現在同一行。
步驟2:將外部Div 的溢位設定為隱藏
應用'overflow: hide;'到外部div,以確保其子元素(巢狀div)保持在其寬度內。
第3 步:將第一個巢狀Div 的寬度設定為自動
將未指定的第一個巢狀div (#inner1) 的寬度保留為“auto”。這允許它根據其內容擴展到必要的寬度。
步驟4:第二個巢狀Div 設定溢位為隱藏
套用'overflow: hide;'到第二個巢狀div (#inner2) ,以防止其超出外部div 中的剩餘空間。
範例程式碼:
<div>
其他注意事項:
為了相容於IE 6,您可能需要增加額外的CSS使用HTML 條件註釋,如所提供的答案所述。
使用此技術,內部 div 將內聯顯示,第二個 div 自動調整以佔據外部 div 中的剩餘空間。
以上是如何讓一個內部div填滿另一個div之後的剩餘空間?的詳細內容。更多資訊請關注PHP中文網其他相關文章!