浮動-ED外層div沒有調整以適應其子

這裏是代碼，高度濃縮：浮動-ED外層div沒有調整以適應其子

<div style="float:left; border: 2px red solid; padding: 2px; margin: 2px;"> 
    <div style="width:50%; border: 2px green solid; padding: 2px; margin: 2px;"> 
     <ul> 
      <li>I_Would_Like_The_Outer_Div_To_Resize_To_Accomdate_This_Blob_Of_Text</li> 
      <li>It's floated-ed because I'm using floating to implement a float layout.</li> 
     </ul> 
    </div> 
</div>

這裏是輸出。我想要擴展外部div的寬度，以便內部div包含長長的文本。下面是輸出：

enter image description here

編輯：

哇。我的意思是說：

外部div是float-ed，因爲我使用floating來實現無表格的COLUMN佈局。

來源

2012-08-01 Words Like Jared

你試過100％寬度 – Prashobh 2012-08-01 15:09:35

把它放在哪個元素中？ – 2012-08-01 15:36:37

只需添加word-wrap:break-word，

<div style="float:left; border: 2px red solid; padding: 2px; margin: 2px;"> 
    <div style="width:50%; border: 2px green solid; padding: 2px; margin: 2px;word-wrap: break-word;"> 
     <ul> 
      <li>I_Would_Like_The_Outer_Div_To_Resize_To_Accomdate_This_Blob_Of_Text</li> 
      <li>It's floated-ed because I'm using floating to implement a float layout.</li> 
     </ul> 
    </div>

來源

2012-08-01 14:20:51 anglimasS

我不想包裝長長的文本。我希望外部div能夠容納足夠大的內部div，完全包含一些文本。（其實這在我的代碼中並沒有那麼長;我發佈的代碼只是爲了說明這個想法，很清楚。） – 2012-08-01 14:25:31

好的。我認爲寬度：50％;這是概率。只需修改內部和外部的div寬度。也許你的prb解決方案 – anglimasS 2012-08-01 14:32:25

在我的實際代碼中，我有第三個div標籤。它在內部div標籤之後。它漂浮在右邊。我使用'width：50％'來製作它，所以內部div都佔用相等數量的水平空間。我無法改變內部div的寬度。 – 2012-08-01 14:47:00

先給雙方的DIV width: auto和可選設置min-width。

來源

2012-08-01 14:41:21 coryetzkorn

儘管您的建議修復了即時問題，但與我的其他代碼不兼容。在外部div裏面，我有另一個div（所以第三個div）漂浮在右邊。我用50％的寬度來確保兩個內部div分別佔用外部div的50％寬度。我用float：left;在外部股利，使外部股利不擴大，以填補其父母。所以我不能改變內部div的寬度。 – 2012-08-01 14:45:13

浮動-ED外層div沒有調整以適應其子

回答

相關問題