如果浏览器窗口变小，则保持 div 向左浮动答案

【问题标题】：keep div floating to the left if browser window gets smaller如果浏览器窗口变小，则保持 div 向左浮动
【发布时间】：2012-06-20 00:58:57
【问题描述】：

我正在尝试制作某种时间线，但我无法保持 div 水平浮动。

我有一个隐藏溢出的 div 容器。在容器内，我的 div 向左浮动。在这些 div 里面是 ul 有固定宽度的。

如果我调整浏览器的大小，我希望 div 从右侧优雅地切断。

目前的情况是它漂浮在前一个的下方并留下一些丑陋的空白。

我怎样才能保持一切水平？

感谢任何帮助！

谢谢你的广告，理查德

编辑

<STYLE>
    #bericht_container{ border: thin solid #000000; margin-left:20px; overflow:hidden; padding:10px;  width:900px;}
    DIV.bericht_maand{ float:left; margin-left: 20px; border: 2px solid #A0A0A4; }
</STYLE>

【问题讨论】：

你能提供一些 HTML/CSS 示例吗？

标签： html css-float

【解决方案1】：

您必须将它们包装在一个 div 中，该 div 是您希望页面的最小宽度。

例如

#wrapper { width: 900px; }

<div id="wrapper">
    ... Your current HTML ...
</div>

您不能使用 CSS 让 div 从边缘“消失”，但您可以让页面在发生这种情况时显示水平滚动条。

【讨论】：

您的宽度需要足以让他们并排放置。
谢谢，我有这个页面可以优雅地完成，但我似乎无法复制相同的行为？demo.tutorialzine.com/2010/01/…
我想我现在看到了，它乘以容器中的 div 并相应地设置容器的宽度，我想？但那是 jquery 的东西。我认为它可以用纯CSS来完成。我会做更多的测试来确定！
你可以使用纯 CSS - 你只需要让你的包装器至少和里面的东西一样宽。它在他们周围充当盾牌，因此他们不会倒塌。
据我所知，要获得他们所拥有的（没有水平滚动条），您必须使用 JS。

【解决方案2】：

我还没有测试过，但我认为如果你将 div 宽度设置为 100% 并溢出隐藏它应该可以工作？

【讨论】：