Javascript 防止在动画容器内清除div

我有一个水平的jQuery动画滑块，它工作得很好，除了宽度开始减小之外，不管我如何设置

，它们进入换行符。我希望他们站在同一条线上，创造出平滑的幻觉

我的意思是：

---

如何防止它们清除？

使用

max width

而不是

width

：

 #container { max-width:500px; height:500px;border:2px dotted maroon; }
    .red, .blue, .green { display:inline-block;max-width: 250px; height:50px; margin:0 auto;}

这是JSFIDLE

更新：

---

要避免出现清晰的问题，请尝试

谢谢您的回答。我一定不清楚。我想让它们表现得像

清晰：在你的例子中，一旦没有空间，它们就会彼此“塌陷”，如果这是正确的终端，这正是我想要的。你能解释一下它是如何工作的吗？我仍然有一些浮动行为不正常。bcz max width设置为父容器的50%。无论其宽度是多少，内部元素的大小都将调整为其宽度的一半（父容器）