無法將div加寬以包含所有浮動元素

我已經將引導日期模塊轉換爲僅使用Angular（仍在轉換中）。 Here is the demo page with the behavior I want to fix.無法將div加寬以包含所有浮動元素

單擊「您的日期範圍選擇器」下的輸入字段以查看daterangepicker。我已經把它貼的你應該看到的截圖：

我遇到的問題是，包裝（div.daterangepickerdropdown-menu.opensright.ltr.show日曆）設置爲寬：auto，但三個子元素，範圍，左日曆和右日曆設置爲float：left。出於某種原因，他們最終將包裝材料垂直疊放，我無法弄清楚爲什麼它們不是水平排列的。我試過玩清除，設置溢出：隱藏到包裝，似乎沒有任何工作。我花了4個多小時的時間用chrome調試器來玩css規則，並且無法讓包裝器儘可能多地展開以便將所有三個子元素水平放置。

要比較它看起來應該是什麼樣子this。

來源

2016-12-30 user594044

您已將下拉菜單嵌套在類別爲col-md-4的div中，該div具有已定義的寬度。

工作演示已將下拉菜單放在此列之外。

即使您完全定位它，它仍然繼承列的最大寬度。（您可以通過將下拉菜單寬度設置爲50％來看到這一點）

您可以通過更改HTML結構並以與演示類似的方式放置下拉菜單來解決此問題，或者使用固定設置覆蓋寬度這將充分適合兒童元素，例如width: 170%。

來源

2016-12-30 07:44:23 sol

我認爲，因爲我在下拉菜單上設置了'width：auto'，所以會覆蓋它正在繼承的內容。你知道那不是這樣嗎？ – user594044

你在這個寬度上是正確的：auto會展開菜單以適應內部的元素 - 但它只能展開佔據與其包含塊相同的寬度，在本例中爲col-md-4。更多在這裏 - > http://stackoverflow.com/questions/17468733/difference-between-width-auto-and-width-100-percent – sol

非常感謝。我在下拉菜單中添加了一個包裝div，並將其設置爲相對位置，因此下拉菜單將停止繼承daterange-picker元素之外的任何內容（以防止我的模塊與其外的任何內容之間的交互）。 – user594044

這裏的問題是以下容器：

<div class="col-md-4 col-md-offset-2 demo"></div>

你應該從上面的元素中刪除position-relative，使您的日期選擇不繼承它的屬性。

或者，您可以將position: relative應用於元素上方的<div class="row"></div>元素，並相應地調整日期選取器。

來源

2016-12-30 10:29:19 nashcheez

除了我標記的答案之外，這個答案也是正確的。 – user594044

@ user594044謝謝 – nashcheez

無法將div加寬以包含所有浮動元素

回答

相關問題