jsfiddle

最近有一个类似的任务，我试图用Javascript解决它，但没有。所以我需要你的帮助。

这个想法是这样的：它就像花边上的珠子，但左边和右边的珠子只有一边有蓝线。也是最后一个方块。结构应该是响应的，这就是为什么我使用Flex.

蓝线是带有背景色的跨线，但如果您愿意，也可以是边框。通过Javascript，当我需要隐藏它们时，我将它们移到左边。如果给这些div加上边框，你就会明白我的想法了。

我认为我的Javacsript应该可以工作，但实际上它只工作了一部分。我哪里错了？谢谢。

---

顺晟科技：

问题在于蓝线元素移动的计算。

注意，在第一次加载时，布局看起来很好--右边的蓝线不在那里--但在调整窗口大小时，它们又回来了。

事情是这样的。这一行

.container > div

拾取样式，该样式在开始时是空的，因为它尚未设置。但是，一旦它被设置（要么为0px要么为-20px)，那么这就是返回的字符串。注意它不是一个数字，它的末尾有px。然后你试着去掉20并添加一个px字符串。这是无法识别的，所以样式。left保持原样-0px或20px.

此代码段设置要显示的蓝线：如果蓝线位于末端，则为none，而不是试图通过移动蓝线来隐藏蓝线。然后，当它们不被删除时，它还必须将它们设置为display：block（以防它们上次被设置为none）。

这种效果完全可以在CSS中实现。为此，蓝线被创建为空格字符的边框或背景，并利用了行尾空格被删除的事实。

据我所知，您将通过使用:

得到您想要的东西

用于divs列表中的最后一个元素。

如果我错了，请告诉我。

已添加图像，以便可以查看结果。