事業部不會成爲全寬

我有一個div #description另一個DIV .item，我希望有相同的寬度DIV它在裏面這是div：事業部不會成爲全寬

<div class="item"> 
    <div id="description"> 
     <h2>Title</h2> 
     <p>Description</p> 
    </div> 
</div>

所以，#description必須與.item具有相同的寬度。問題是#description不響應我寫的CSS，即使我使用不同的百分比。我猜測它會停止水平填充30%而不是100%。

.item { 
    float: left; 
    width: 100%; 
    border: 1px solid; 
    border-color: #575757; 
    position: relative; 
} 

#description { 
    width: 100%; 
    height: 40%; 
    bottom: 0px; 
    position: absolute; 
    background-color: whitesmoke; 
    color: #000000; 
}

據我所知，內部div應該自動變成與外部相同的寬度而不指定任何寬度屬性，對嗎？那麼，爲什麼這不起作用？

來源

2014-03-13 Tomjesch

項目處於浮動狀態，描述位於絕對位置，所以項目因爲浮動而沒有寬度。如果沒有內容，浮動元素沒有寬度。甚至將它設置爲100％，因爲你的內容是絕對的，所以它沒有高度。刪除抽象的位置，你會得到http://jsfiddle.net/k37qs/ – Huangism

當一個元素被絕對定位時，它本質上是removed from the natural document flow。在這種情況下，父元素.item不再具有維度，因爲子元素不再處於流程中。元素.item本質上已經崩潰，因此導致子元素執行相同的操作。爲了解決這個問題，您需要刪除絕對位置，否則您需要在父元素上設置定義的尺寸。

以下是在父元素上設置高度爲200px的示例 - (example)。這可能在某些情況下有效，但它不是很理想，因爲它不適用於動態內容。

作爲一種替代方法，您可以刪除絕對定位，並且子元素.description將自動採用父級的維度。 (example)這是基本上block級別元素的默認行爲，因爲某些屬性從其瀏覽器默認值重置。

來源

2014-03-13 20:54:20

即使沒有絕對的定位和浮動的描述不會填充項目的寬度。 – Tomjesch

@Tomjesch你看了我提供的例子嗎？鑑於它是唯一的子元素，它將填充父項。 –

我確實這樣做了。就像你說的那樣，我更喜歡第二個例子（如果它在工作），因爲它會自動獲取項目的維度。目前正在通過W3格式化模型進行研究，可能會清除所有問題...... – Tomjesch

事業部不會成爲全寬

回答

相關問題