Javascript 如何使隐藏的子div大于父div，并在显示时向下推下一行？

我试图让每个可点击的互动程序在被点击时显示相关内容，并占据整个宽度。在我上面的代码中，单击子div时，它只会将一个“.tile”推到一边。在我的搜索中，我发现使用“.tile{position:absolute；}”可以使子对象比其父对象大。我真的被这件事缠住了，希望能得到一些帮助。这是我的密码

$(document).ready(function(){
        $(".tile").on("click", function(){
          $(".show").hide();
          $(this).children("div.show").toggle("fast");
        });
    });

$（文档）.ready（函数（）{
$（“.tile”）。在（“单击”，函数（）{
$（“.show”）.hide（）；
$（this.children（“div.show”）.toggle（“fast”）；
});
});
*{
宽度：80%
保证金：0自动；
}
.瓷砖{
宽度：25%；
浮动：左；
}
.表演{
显示：无；
/*位置：绝对位置；
宽度：100*/
}

标题
一些文本

标题
一些文本

标题
一些文本

标题
一些文本

标题
一些文本

标题
一些文本

标题
一些文本

标题
一些文本

就随着视口大小的增加而增加图像数量而言，您当前的实现不会帮助您实现这一点，因为您使用的是每个图像宽度为25%的浮动。这将始终强制每行显示4个图像

作为您所寻找的解决方案的一部分，请找到更新的笔



*{
宽度：80%边距：0自动；
}
.包装纸{
明确：两者皆有；
}
.瓷砖{
宽度：25%；
浮动：左；
}
.表演{
显示：无；
/*位置：绝对位置；
宽度：100*/
}

标题
一些文本

标题
一些文本

标题
一些文本

标题
一些文本

标题
一些文本

标题
一些文本

标题
一些文本

标题
一些文本

就随着视口大小的增加而增加图像数量而言，您当前的实现不会帮助您实现这一点，因为您使用的是每个图像宽度为25%的浮动。这将始终强制每行显示4个图像

作为您所寻找的解决方案的一部分，请找到更新的笔



*{
宽度：80%边距：0自动；
}
.包装纸{
明确：两者皆有；
}
.瓷砖{
宽度：25%；
浮动：左；
}
.表演{
显示：无；
/*位置：绝对位置；
宽度：100*/
}

标题
一些文本

标题
一些文本

标题
一些文本

标题
一些文本

标题
一些文本

标题
一些文本

标题
一些文本

标题
一些文本

我已更新了您的笔以匹配您的描述：

我在所有瓷砖周围添加了一个flexbox包装，以将项目对齐成行。我保留了25%的宽度，但你可以根据自己的意愿进行更新。单击平铺时，将切换“显示文本”类，并向平铺父级添加边距底部，这将向下推下一行

我还更新了你的点击处理程序，因为逻辑不一致，所以不能正确切换。如果你有任何问题，请告诉我


$（文档）.ready（函数（）{
$（“.tile”）。在（“单击”，函数（）{
$（“.tile:不（.show text）.show”）.hide（）；
$（this.toggleClass（“显示文本”）；
$（this.children（“div.show”）.toggle（“fast”）；
});
});
*{
宽度：80%
保证金：0自动；
}
.瓷砖包装{
显示器：flex；
柔性包装：包装；
}
.瓷砖{
宽度：25%；
}
.tile.show-text{
边缘底部：100px；
}
.表演{
显示：无；
位置：绝对位置；
左：0；
宽度：100%；
背景颜色：绿色；
}

标题
一些文本

标题
一些文本

标题
一些文本

标题
一些文本

标题
一些文本

标题
一些文本

标题
一些文本

标题
一些文本

我已更新了您的笔以匹配您的描述：

我在所有瓷砖周围添加了一个flexbox包装，以将项目对齐成行。我保留了25%的宽度，但你可以根据自己的意愿进行更新。单击平铺时，将切换“显示文本”类，并向平铺父级添加边距底部，这将向下推下一行

我还更新了你的点击处理程序，因为逻辑不一致，所以不能正确切换。如果你有任何问题，请告诉我


$（文档）.ready（函数（）{
$（“.tile”）。在（“单击”，函数（）{
$（“.tile:不（.show text）.show”）.hide（）；
$（this.toggleClass（“显示文本”）；
$（this.children（“div.show”）.toggle（“fast”）；
});
});
*{
宽度：80%
保证金：0自动；
}
.瓷砖包装{
显示器：flex；
柔性包装：包装；
}
.瓷砖{
宽度：25%；
}
.tile.show-text{
边缘底部：100px；
}
.表演{
显示：无；
位置：绝对位置；
左：0；
宽度：100%；
背景颜色：绿色；
}

标题
一些文本

标题
一些文本

标题
一些文本

标题
一些文本