Javascript 如何将单个div扩展到下一行

我们有一个容器（红色）和一个子div（蓝色）。增加子div的宽度时，我希望子div位于下一行，而不是继续位于同一行。

这就是现在发生的情况：

这就是所需要的：

.container{
宽度：100px；
高度：50px；
背景：红色；
位置：绝对位置；
}
.孩子{
宽度：120px；
高度：20px；
背景：蓝色；
保证金：5px 5px 0px 5px；
位置：相对位置；
}

---

您将无法使用单个矩形div执行此操作，但您可以执行类似操作。 希望这有帮助

这是另一个解决方案，不确定是否适合您的情况

.parent{
宽度：500px；
显示：网格；
网格模板列：重复（自动填充，186px）；
背景色：红色；
}
.parent>*{
背景颜色：蓝色；
高度：50px；
边框：1px纯白；
颜色：白色；
}

1.
2.
3.
4.

我不知道你问题的大局。然而，这里有一种使用

HTML

、

CSS

和

Javascript

的黑客方法

javscript所做的是：

获取容器和子容器的宽度

检查子容器的

宽度是否高于容器的
宽度

如果上述为真，则获取偏移量（childWidth-containerWidth）

减小子容器的宽度

并使其与容器相等

创建一个

div

并给它一个

宽度

等于

偏移量

，给它一个

高度

等于子项

将

div

附加到容器中

var container=document.querySelector（'.container'）；
var containerWidth=container.offsetWidth；
var child=document.querySelector（'.child'）；
var childWidth=child.offsetWidth；
（功能（）{
extendeddivtonextrow（）；
})();
函数extendDivToNextRow（）{
让我们抵消；
让第二排；
如果（childWidth>containerWidth）{
sliceChildDiv（）；
extendToSecondRow（）；
}
}
函数getChildOffset（）{
返回childWidth-containerWidth；
}
函数sliceChildDiv（）{
const newWidth=childWidth-getChildOffset（）；
setAttribute（“style”，宽度：${newWidth}px`）；
}
函数extendToSecondRow（）{
const secondRow=createSecondRow（）；
container.appendChild（第二行）；
}
函数createSecondRow（）{
const row=document.createElement（'div'）；
setAttribute（“style”，宽度：${getChildOffset（）}px；高度：20px；背景：蓝色`）；
返回行；
}

*{
边际：0px；
}
.集装箱{
宽度：100px；
高度：50px；
背景：红色；
位置：绝对位置；
}
.孩子{
宽度：120px；
高度：20px；
背景：蓝色；
位置：相对位置；
}

使用html结构很难做到这一点，为什么不在同一级别上添加两个div？对于child，宽度是如何增加的？这是动态的，或者您希望它的行为有所不同。您可以使用javascript来实现这一点。例如，在渲染div时，可以计算其宽度，如果父对象的宽度小于子对象的宽度，然后你可以根据需要调整子div的高度。@Jai它将动态增加。你不能用div来做这件事。所有块级元素都是矩形的。我已经在我的第一行答案中指定了它，这是不可能的。如果可能的话，这是一种解决方案。