動態設定另一個內部div的寬度後，如何使內部div填滿剩餘的水平空間？

設定內部 Div 的寬度

使用巢狀 div 和彈性內容時，確定每個 div 的適當寬度可能具有挑戰性。本問題探討了一種在考慮另一個內部 div 的寬度後將內部 div 的寬度設定為剩餘水平空間的技術。

HTML 結構：

The HTML 結構由一個外部div 和兩個巢狀的內部div 組成：

<div>

問題陳述：

目標是讓#inner2 div 填入剩餘的水平方向#inner1 div 的寬度是根據其內容動態決定的。

神秘成分：溢出：隱藏

實現此佈局的關鍵是使用CSS 屬性溢位：隱藏；在外部 div (#outer) 上。這指示瀏覽器將其浮動子項限制在自己的邊界內。

修訂的HTML：

要有效應用CSS，div id 應遵循有效的CSS 語法：

<div>

CSS 解決方案：

#outer {
  overflow: hidden;
  width: 100%;
  /* Styling for illustration purposes */
  border: solid 3px #666;
  background: #ddd;
}

#inner1 {
  float: left;
  /* Styling for illustration purposes */
  border: solid 3px #c00;
  background: #fdd;
}

#inner2 {
  overflow: hidden;
  /* Styling for illustration purposes */
  border: solid 3px #00c;
  background: #ddf;
}

瀏覽器相容性和邊緣情況：

此解決方案已經過測試並確認在IE 6、7 和8 中可以正常工作；火狐3.5；和Chrome 4。在 IE 6 中，使用縮放的附加 CSS 規則：1；確保 #inner2 div 填滿剩餘空間是必要的。

以上是動態設定另一個內部div的寬度後，如何使內部div填滿剩餘的水平空間？的詳細內容。更多資訊請關注PHP中文網其他相關文章！