如果孩子較小，繼承父寬度 - 孩子絕對定位

Question

我正在爲我的項目使用Twitter Bootstraps網格。 我有以下HTML：

<div class="row-fluid"> 
    <div class="span4 item"> 
     <div class="inner">Some text</div> 
    </div> 

    <div class="span4 item"> 
     <div class="inner">Some text</div> 
    </div> 

    <div class="span4 item"> 
     <div class="inner">Some text</div> 
    </div> 
</div> 

和下面的CSS：

.item { 
    position: relative; 
} 

.item .inner { 
    background: #fff; 
} 

.item:hover .inner, 
.item .inner:hover { // I did them both because on mobile it catches only the first 
    position: absolute; 
} 

其結果是，當我懸停「.item .inner」時，元件的長度是一樣的「 。項目」。 「.inner」裏面我可能有寬度不明的圖像，我希望這些圖像在鼠標懸停時伸展到它們的實際寬度 ，但是因爲「.item .inner」僅限於「.item」的寬度什麼，取決於用戶屏幕）「.item .inner」不會伸展。

我想也許是從「.item」中刪除「position：relative」，這允許「.item .inner：hover」儘可能多地展開，但如果內容比「.item」的寬度短，它會縮小 - 這是我不想要發生的一個功能

怎麼可能使它發生？

---

編輯：

在第一種情況下，你可以看到什麼，我現在 - 當你鼠標懸停在一個文本，它失去了它的寬度 - 但是如果你懸停的圖像，它延伸。 http://jsfiddle.net/g5nP7/

在這種情況下，您可以看到，如果您將文字懸停，它不會丟失寬度，但如果您將圖像懸停，則不會拉伸。 http://jsfiddle.net/dT7c5/4/

我想要的是當您將文本懸停時 - 只有當內部的內容長於懸停時的項目寬度時，它纔會伸展。 我不希望它收縮，如果內容是短於項目

也因爲你可以在這兩個例子看，如果你懸停的圖像，它失去了它的高度和力量等項目上去。

Answer 1

我能想出的唯一純CSS解決方案是使用max-width與min-width的組合，在盤旋時帶走max-width。引導使得它有點難以共事，但在本質上我刪除span4 CSS和使用媒體查詢，達到了非常類似的效果

... Some other CSS ... 
.item .inner { 
    ... 
    width:auto; 
} 
.item:hover .inner, .item .inner:hover { 
    max-width:none; 
} 
.span4.item { width:auto; } 
@media screen and (min-width:980px) { 
    .item .inner { 
     min-width:265px; 
     max-width:265px; 
    } 
} 
@media screen and (max-width:980px) and (min-width:770px) { 
    .item .inner { 
     min-width:200px; 
     max-width:200px; 
    } 
} 

Demo here。它不是100％完美的，因爲它使用媒體查詢斷點而不是網格系統引導程序的用途（我嘗試使用百分比寬度來模仿原始功能，但它打破了它），但是對於媒體查詢，很難區分它們。唯一的是，你可能想要添加另一個媒體查詢大屏幕，使其適合屏幕更好一點