无法将div扩展为包含所有浮动元素

Question

我已将自举日期模块转换为仅使用Angular（仍处于转换过程中）。 Here is the demo page with the behavior I want to fix.

点击＆＃34;您的日期范围选择器＆＃34;下的输入字段。看到daterangepicker。我附上了你应该看到的截图：

我遇到的问题是包装器（div.daterangepickerdropdown-menu.opensright.ltr.show-calendar）设置为width：auto，但三个子元素，范围，左侧日历和右侧日历设置为浮动：左。由于某种原因，他们最终包装，以便他们垂直堆叠，我无法弄清楚为什么他们不是横向并排。我试过玩清除，设置溢出：隐藏到包装器，似乎没有任何工作。我花了4个多小时的时间使用chrome调试器来玩css规则，并且不能让包装器扩展到必要的范围，以便将所有三个子元素水平放置。

比较它应该是什么样的this。

Answer 1

您已在具有已定义宽度的类col-md-4的div中嵌套了下拉菜单。

工作演示将下拉菜单放在此列之外。

即使你绝对定位它仍然继承了列的最大宽度。 （您可以通过将下拉菜单宽度设置为50％来看到这一点）

您可以通过更改HTML结构并以与演示类似的方式定位下拉菜单，或使用适合儿童元素的固定设置覆盖宽度来解决此问题，例如： width: 170%。

Answer 2

这里的问题是以下容器：

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

您应该从上面的元素中删除position-relative，这样您的日期选择器就不会从中继承属性。

或者，您可以将position: relative应用于<div class="row"></div>元素正上方的.demo元素，并相应地对齐您的日期选择器。