Javascript 在Y轴上设置动画，而不移动X轴下方的元素
我试图实现一种效果，即在使用CSS和Javascript单击（就像图像中的红色方块一样）时显示更多的节内容，但不会干扰几乎所有元素的“X轴”位置，也不会静态定义列数量。现在，我所做的将动画内容下方的块向右移动。有什么建议或图书馆吗？ 多谢各位 图片： 编辑： 这是小提琴，显示单击左侧的elementos时发生的情况： 以及相应的代码Javascript 在Y轴上设置动画，而不移动X轴下方的元素,javascript,html,css,animation,Javascript,Html,Css,Animation,我试图实现一种效果，即在使用CSS和Javascript单击（就像图像中的红色方块一样）时显示更多的节内容，但不会干扰几乎所有元素的“X轴”位置，也不会静态定义列数量。现在，我所做的将动画内容下方的块向右移动。有什么建议或图书馆吗？ 多谢各位 图片： 编辑： 这是小提琴，显示单击左侧的elementos时发生的情况： 以及相应的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
position: fixed;
height: 100%;
width: 100%;
}
.container{
width: 50%;
height: 80%;
margin: 0 auto;
background: #E3DBDB;
}
.item{
width: 40%;
height: 10%;
float: left;
margin: 1em;
background: #7C86C0;
color: #fff;
text-align: center;
cursor: pointer;
}
/*.item:nth-child(2n+1){
float: left;
}
.item:nth-child(2n){
float: right;
}*/
.itemActive{
background: #a70000;
height: 30%;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<script>
function resizeHeight( evt ) {
evt.target.classList.toggle('itemActive');
}
var targets = document.getElementsByClassName('item');
for (var i = 0; i < targets.length; i++) {
targets[i].addEventListener("click", resizeHeight);
}
</script>
</body>
</html>
文件
身体{
位置：固定；
身高：100%；
宽度：100%；
}
.集装箱{
宽度：50%；
身高：80%；
保证金：0自动；
背景：#E3DBDB；
}
.项目{
宽度：40%；
身高：10%；
浮动：左；
边缘：1米；
背景：7C86C0；
颜色：#fff；
文本对齐：居中；
光标：指针；
}
/*.项目：第n个子项（2n+1）{
浮动：左；
}
.项目：第n个孩子（第2n个）{
浮动：对；
}*/
.itemActive{
背景：#7万；
身高：30%；
}
1.
2.
3.
4.
5.
6.
功能调整高度（evt）{
evt.target.classList.toggle（'itemActive'）；
}
var targets=document.getElementsByClassName（'item'）；
对于（变量i=0；ifloat:leftfloat:right