強制孩子浮動父寬

關於強制嵌套的div孩子填充其父容器的寬度有很多問題，但我的問題是如何強制一個自然流動寬度大於它的子div父容器（例如，子div包含一個文本節點，最終伸展父容器的寬度以外的子節點）以維護父節點的寬度？強制孩子浮動父寬

一個簡單的非動態解決方案是在父級上設置寬度，但如果寬度未預先確定（出於響應的原因）會怎麼樣？有一些標籤，我可以添加到子元素，以確保它們包裹的內容，並迫使元素留在父母的寬度範圍內？`

<div class="parent"> //Width is not set 
    <div class="child">Here might be a long string of dynamic text</div> 
</div>

我明白，父元素上設置寬度會解決這個問題，但在我的情況下，我不能這樣做，因爲該元素設置爲根據屏幕大小調整其寬度。因此，舉例來說，如果用戶使用手機並從縱向轉爲橫向，父元素必須能夠調整大小，我寧願不必爲此使用JavaScript。

我還應該提到，在我的特殊情況下，父元素是一個浮點數。我不確定這件事是否重要。

2013-04-29 ryandlf

你能否提供jsfiddle http://jsfiddle.net/展示問題？ – 2013-04-29 02:21:41

我的第一反應是這是內部div的自然行爲，所以也許我不理解這個問題。你可以發佈一個鏈接到一個例子，那裏的東西無法正常工作嗎？默認情況下，上面的子div將填充容器，文本將根據需要進行包裝。 – 2013-04-29 02:23:33

也許你可以爲父'div'使用固定寬度，使用媒體查詢設備特定的大小，並可以設置子''div' width'100％'，IMO。 – 2013-04-29 02:24:00

每謝赫Heera的關於這個問題的意見，實現這一目標是通過對父實際設置寬度的唯一途徑元件。在我的情況下，最強大的解決方案是使用媒體查詢來相應地設置每個屏幕大小的寬度。它不完全是我想要的解決方案，但它是最好的選擇。

2013-04-29 04:06:21 ryandlf

您可以通過使用overflow樣式包含父項子大小：

.parent { 
    overflow: hidden; 
} 

.child { 
    width: 100%; 
}

2013-04-29 02:24:35

不幸的是，這也不起作用。可能是因爲父項是一個沒有設置寬度的float元素？不會溢出只是隱藏內容？我需要顯示的內容，只是最好打破文字，並根據需要包裝。 – ryandlf 2013-04-29 02:40:28

如果文本直接在父div中，它將隱藏文本（如果文字較大），但是如果子div包含文本，則子div將調整爲父大小，並且文本將被包裝。 – 2013-04-29 02:45:13

嗯......不適合我。也許是因爲父母是一個浮動？ – ryandlf 2013-04-29 03:01:13

爲什麼不使用最大寬度CSS屬性？ Div，特別是這裏的孩子，是一個塊級元素，應該限制在父div的寬度。如果以下代碼無效，我們將需要您擴展您的工作內容。

.child { 
max-width: 100% 
}

嘗試在你的樣式表中看到css魔法！乾杯

2013-04-29 02:24:54 schifferl

如果父容器位於容器內，這也適用於父容器 – schifferl 2013-04-29 02:26:08

由於父容器是浮動容器並且沒有設置寬度，因此最大寬度不起作用。不幸。 – ryandlf 2013-04-29 02:27:07

你有反對使用JavaScript嗎？它適用於所有現代瀏覽器，並且可以輕鬆實現。讓我知道如果你想幫你寫一個函數來調整你的尺寸 – schifferl 2013-05-05 17:39:56

這是你想要達到的。

CSS

.parent {float:left; width:100%} 
.child {display:block}

工作demo

希望這有助於..

2013-04-29 03:09:32 jhunlio

你在這裏有一個設定的寬度。 jsFiddle說它沒有，但它設置爲100％。 – ryandlf 2013-04-29 03:38:49

可以舉例說明你想要達到的目標。 – jhunlio 2013-04-29 03:59:30

回答