Jquery CSS：左浮动&；左溢

这个图像应该是不言自明的

基本上，我试图让一个div的行为如下：

• 当有足够的空间显示整个div时，将显示整个div，并向左浮动
• 当没有足够的空间时，div应该溢出并隐藏在左侧

如果CSS不能单独做到这一点，您是否有指向类似工作JS的链接

我试图使用JSFIDLE来了解：

这是第一部分-
这是第二部分-
这是第三部分-
这是第四部分

您的问题有一个可能的解决方案。这需要CSS和JS共同工作。外部和内部div应具备以下理解：

.outer-div {
    position: relative;
    // padding-top: <height of .inner-div>
}
.inner-div {
    position: absolute;
    left: 0;
    top: 0;
}

当调整屏幕大小或任何您想要调整的事件时，调用

onResizeOrDetectChange

，它可以产生您想要的效果

---

这是修改过的小提琴：。与您的

float:left

相比，我使用了flex-box样式，以使

内部div保持在一行中
您可以使用display-flex来解决此问题。请参阅下面的代码。这会解决你的问题


.outer div{
空白：nowrap；
}
.内分区{
显示：内联块；
溢出：隐藏；
空白：nowrap；
显示器：flex；
柔性包装：包装；
}
.内部分区>分区{
flex:0自动；
}
.第1部分{
显示：内联块；
浮动：左；
背景色：红色；
空白：nowrap；
}
.第二部分{
显示：内联块；
浮动：左；
背景颜色：蓝色；
空白：nowrap；
}
.第三部分{
显示：内联块；
浮动：左；
背景颜色：绿色；
空白：nowrap；
}
.第四部分{
显示：内联块；
浮动：左；
背景颜色：黄色；
空白：nowrap；
}

这是第一部分-
这是第二部分-
这是第三部分-
这是第四部分
这是第一部分-
这是第二部分-
这是第三部分-
这是第四部分
这是第一部分-
这是第二部分-
这是第三部分-
这是第四部分
一种方法是通过
方向：rtl
参考：

使用
Flexbox使用
flexflow：行反转


body{margin:0；}
.外分区{
空白：nowrap；
溢出：隐藏；
显示器：flex；
柔性流程：行反向；
最大宽度：400px；
}
.内分区{
显示器：flex；
}
.部分{
填充：10px；
}
.第1部分{
背景色：红色；
}
.第二部分{
背景颜色：蓝色；
}
.第三部分{
背景颜色：绿色；
}
.第四部分{
背景颜色：黄色；
}

这是第一部分
这是第二部分
这是第三部分
这是第四部分
设置内墙的高度或最大高度属性-div@ShrihariBalasubramani这不适用于多行溢出，但无助于最终目标-左侧溢出。你听说过bootstrap吗？@AEX你想让它从白盒中出来并向左溢出？@ZaraJamshaid听说过它-没有使用过它。对任何适用于此场景的内容都感兴趣。请链接任何适合的行为。这是有效的，谢谢！我选择其他方法作为答案的唯一原因是因为它是首先发布的。这实际上不起作用：（…如果.outer div{max width:600}很明显，为什么它会向右浮动，而不会向左浮动。
.outer-div {
    position: relative;
    // padding-top: <height of .inner-div>
}
.inner-div {
    position: absolute;
    left: 0;
    top: 0;
}

const onResizeOrDetectChange = () => {
    const outerDiv = document.querySelector('.outer-div');
    const innerDiv = document.querySelector('.inner-div');
    const widthDiff = outerDiv.offsetWidth - innerDiv.offsetWidth

    // will be less than 0 when outer div width is less than inner div width
    if (widthDiff < 0) {
        innerDiv.style.left = widthDiff + 'px'
    } else {
        innerDiv.style.left = 0
    }
}