Javascript 当父项太小时，防止div换行

如何阻止父div中的div被包装而不是被切断

代码：

var slider=document.getElementById（“slider”），
cont1=document.getElementById（“container1”），
cont2=document.getElementById（“container2”）；
slider.addEventListener（“输入”，函数（）{
cont1.style.width=slider.value+“px”；
cont2.style.width=slider.value+“px”；
}，假）
#项目{
宽度：100px；
高度：100px；
浮动：左；
}
.集装箱{
高度：100px；
背景色：#ccc；
}
使用滑块更改容器的宽度

溢出：隐藏

溢出：可见

< /代码> 而不是浮点考虑<代码>内联块< /代码>，您将能够使用<代码>空间

var slider=document.getElementById（“slider”），
cont1=document.getElementById（“container1”），
cont2=document.getElementById（“container2”）；
slider.addEventListener（“输入”，函数（）{
cont1.style.width=slider.value+“px”；
cont2.style.width=slider.value+“px”；
}，假）
#项目{
宽度：100px；
高度：100px；
显示：内联块；
}
.集装箱{
高度：100px；
背景色：#ccc；
空白：nowrap；
字体大小：0；/*以避免内联块之间出现空白*/
}
使用滑块更改容器的宽度

溢出：隐藏

溢出：可见

如果我正确理解您的意图，您希望灰色滑块“淡入”绿色方块，将绿色方块保留在原处

为此，您需要将
溢出：隐藏
与
位置：绝对
结合使用：


var slider=document.getElementById（“slider”）；
var cont1=document.getElementById（“container1”）；
slider.addEventListener（“输入”，函数（）{
cont1.style.width=slider.value+“px”；
}，假）
绿色{
位置：绝对位置；
左：计算（100px+8px）；/*红色偏移+主体边距*/
}
.项目{
宽度：100px；
高度：100px；
浮动：左；
}
.集装箱{
高度：100px；
背景色：#ccc；
}
使用滑块更改容器的宽度

请将所有相关代码包含在问题本身中，而不是外部网站上。您在哪个浏览器上看到问题？在Chrome上，对我来说，您的溢出：隐藏解决方案没有包装，可能会按照您的预期运行。@MikeMcCaughan对此表示抱歉，已修复。@ErikHermansen当宽度太小时，它仍会消失绿色块似乎被卡住，当宽度降低时，不会被切断。因此，当没有空间容纳绿色块时，您希望绿色块变小吗？