CSS转换导致ul列中断

我正在尝试为员工档案创建一个页面，其中显示图像名称和标题，然后单击箭头展开该员工的描述

当我将ul设置为2列时，会导致一个问题，即扩展多个描述会慢慢地将该列中的底部li推到下一列。可能在下一个专栏中以半个李结尾

像这样：

理想情况下，ul只需扩展其高度，以说明描述中的额外高度。然而，一旦开始重叠，将整个li推到下一列也是可以接受的

有没有办法做到这一点

HTML:

---

我使用了

flex

来解决这个问题，这是一个更好的方法更新CSS

.teams {
    margin: 1em auto;
    padding: 0;
    list-style: none;
    columns: 2;
    max-width: 1024px;
    display: flex;
    flex-wrap: wrap;
}

.teams li {
    padding: 1em;
    box-sizing: border-box;
    margin-bottom: 1em;
    flex: 1;
}

---

您可以在

上设置
最小高度
。如果您知道您的描述行
我使用
flex
来解决这个问题，这是CSS下面更新的更好方法

.teams {
    margin: 1em auto;
    padding: 0;
    list-style: none;
    columns: 2;
    max-width: 1024px;
    display: flex;
    flex-wrap: wrap;
}

.teams li {
    padding: 1em;
    box-sizing: border-box;
    margin-bottom: 1em;
    flex: 1;
}

您可以在
上设置
最小高度
。如果您知道描述行
您可以重置
显示
和
宽度
，以避免
li
框分成两列：

例如：


$（“.expander”）。单击（函数（）{
if（$（this.attr（“id”）=“open”）{
$（this.attr（“id”，“closed”）；
$（this.nexist（“li”）.find（“.bottom”）.attr（“id”，“id”）；
}
否则{
$（this.attr（“id”，“open”）；
$（this.nexist（“li”）.find（“底部”）.attr（“id”，“expanded”）；
}
});
正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
.团队{
保证金：1em自动；
填充：0；
列表样式：无；
栏目：2个；
最大宽度：1024px；
}
李先生{
填充：1em；
框大小：边框框；
边缘底部：1米；
显示：内联块；
宽度：100%；
}
.李队，头名{
显示器：flex；
柔性包装：nowrap；
对齐项目：居中；
高度：150像素；
溢出：隐藏；
}
.李队.图片包{
宽度：150px；
高度：150像素；
背景:#f3；
边界半径：100%；
位置：相对位置；
溢出：隐藏；
}
.李小队.图片包装图片{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
宽度：100%；
身高：100%；
保证金：自动；
边缘顶部：1米；
框大小：边框框；
对象匹配：覆盖；
内破：避开立柱；
}
.李队.图片包装：在{
内容：“；
显示：块；
填充顶部：100%；
}
.李小队.详情{
左边距：1米；
宽度：计算（100%-150px）；
}
.李队.前h2，
.李队.排名前h4{
保证金：0；
颜色：#5A96D3；
}
.李，下{
边缘顶部：1米；
不透明度：0；
溢出：隐藏；
最大高度：0；
背景:#f3；
过渡：最大高度1.5s；
}
.李小队{
保证金：0；
填充：1em；
框szing：边框框；
}
.李队.下#扩大{
不透明度：1；
溢出：隐藏；
最大高度：100px；
过渡：最大高度1.5s；
}
.李队.扩展器{
边界半径：100%；
背景:#f3；
高度：35px；
宽度：35px；
填充：0.5em；
框大小：边框框；
左边距：自动；
右边距：0；
光标：指针；
}
.李队.扩展器跨度{
文本对齐：居中；
显示：块；
用户选择：无；
转型：转型0.5s轻松；
}
.团队李.扩展器#关闭>跨度{
变换：旋转（0度）；
}
.团队李.扩展器#打开>跨度{
变换：旋转（-90度）；
}



员工姓名
标题
您可以重置
显示
和
宽度
，以避免
li
框分成两列：

例如：


$（“.expander”）。单击（函数（）{
if（$（this.attr（“id”）=“open”）{
$（this.attr（“id”，“closed”）；
$（this.nexist（“li”）.find（“.bottom”）.attr（“id”，“id”）；
}
否则{
$（this.attr（“id”，“open”）；
$（this.nexist（“li”）.find（“底部”）.attr（“id”，“expanded”）；
}
});
正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
.团队{
保证金：1em自动；
填充：0；
列表样式：无；
栏目：2个；
最大宽度：1024px；
}
李先生{
填充：1em；
框大小：边框框；
边缘底部：1米；
显示：内联块；
宽度：100%；
}
.李队，头名{
显示器：flex；
柔性包装：nowrap；
对齐项目：居中；
高度：150像素；
溢出：隐藏；
}
.李队.图片包{
宽度：150px；
高度：150像素；
背景:#f3；
边界半径：100%；
位置：相对位置；
溢出：隐藏；
}
.李小队.图片包装图片{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
宽度：100%；
身高：100%；
保证金：自动；
边缘顶部：1米；
框大小：边框框；
对象匹配：覆盖；
内破：避开立柱；
}
.李队.图片包装：在{
内容：“；
显示：块；
填充顶部：100%；
}
.李小队.详情{
左边距：1米；
宽度：计算（100%-150px）；
}
.李队.前h2，
.李队.排名前h4{
保证金：0；
颜色：#5A96D3；
}
.李，下{
边缘顶部：1米；
不透明度：0；
溢出：隐藏；
最大高度：0；
背景:#f3；
过渡：最大高度1.5s；
}
.李小队{
保证金：0；
填充：1em；
框szing：边框框；
}
.李队.下#扩大{
不透明度：1；
溢出：隐藏；
最大高度：100px；
过渡：最大高度1.5s；
}
.李队.扩展器{
边界半径：100%；
背景:#f3；
高度：35px；
宽度：35px；
填充：0.5em；
框大小：边框框；
左边距：自动；
右边距：0；
光标：指针；
}
.李队.扩展器跨度{
文本对齐：居中；
显示：块；
用户选择：无；
转型：转型0.5s轻松；
}
.团队李.扩展器#关闭>跨度{
特兰
.teams {
    margin: 1em auto;
    padding: 0;
    list-style: none;
    columns: 2;
    max-width: 1024px;
    display: flex;
    flex-wrap: wrap;
}

.teams li {
    padding: 1em;
    box-sizing: border-box;
    margin-bottom: 1em;
    flex: 1;
}

     $(".expander").click(function() {
         if($(this).attr("id") == "open") {
           $(this).attr("id", "closed");
           $("#" + Title).css("display", "none");
            }
            else {
              $(this).attr("id", "open");
              $("#" + Title).css("display", "block");
             }