CSS 转换导致 ul 列中断

Question

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

虽然我的 ul 设置为 2 列时一切正常，但会导致一个问题，即扩展多个描述会慢慢将该列中的底部 li 推到下一列。可能在下一列以半里结尾。

像这样：

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

有什么办法可以实现吗？ JSFiddle

HTML:

<ul class="teams">
    <li>
        <div class="top">
            <div class="imageWrap">
                <img src="useruploads/user.png">
            </div>

            <div class="details">
                <h2>Employee Name</h2>
                <h4>Title</h4>
            </div>

            <div class="expander"><span><</span></div>
        </div>

        <div class="bottom">
            <p>Description</p>
        </div>
    </li>
</ul>

CSS:

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

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

.teams li .top {
display: flex;
flex-wrap: nowrap;
align-items: center;
height: 150px;
overflow: hidden;
}

.teams li .imageWrap {
width: 150px;
height: 150px;
background: #f3f3f3;
border-radius: 100%;
position: relative;
overflow: hidden;
}

.teams li .imageWrap img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
margin: auto;
margin-top: 1em;
box-sizing: border-box;
object-fit: cover;
break-inside: avoid-column;
}

.teams li .imageWrap:before {
content: "";
display: block;
padding-top: 100%;
}

.teams li .details {
margin-left: 1em;
width: calc(100% - 150px);
}

.teams li .top h2, 
.teams li .top h4 {
margin: 0;
color: #5A96D3;
}

.teams li .bottom {
margin-top: 1em;
opacity: 0;
overflow: hidden;
max-height: 0;
background: #f3f3f3;
transition: max-height 1.5s ease;
}

.teams li .bottom p {
margin: 0;
padding: 1em;
box-szing: border-box;
}

.teams li .bottom#expanded {
opacity: 1;
overflow: hidden;
max-height: 100px;
transition: max-height 1.5s ease;
}

.teams li .expander {
border-radius: 100%;
background: #f3f3f3;
height: 35px;
width: 35px;
padding: 0.5em;
box-sizing: border-box;
margin-left: auto;
margin-right: 0;
cursor: pointer;
}

.teams li .expander span {
text-align: center;
display: block;
user-select: none;
transition: transform 0.5s ease;
}

.teams li .expander#closed > span {
transform: rotate(0deg);
}

.teams li .expander#open > span {
transform: rotate(-90deg);
}

Answer 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;
}

如果您知道描述行，则可以在 .teams li 上设置 min-height

Answer 2

您可以重置 display 和 width 以避免 li 框分成两列：

例子：

$(".expander").click(function() {
  if($(this).attr("id") == "open") {
    $(this).attr("id", "closed");
    $(this).closest("li").find(".bottom").attr("id", "");
  }
  else {
    $(this).attr("id", "open");
    $(this).closest("li").find(".bottom").attr("id", "expanded");
  }
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

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

.teams li {
    padding: 1em;
    box-sizing: border-box;
    margin-bottom: 1em;  
    display:inline-block;
    width:100%;
}

.teams li .top {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: 150px;
    overflow: hidden;
}

.teams li .imageWrap {
    width: 150px;
    height: 150px;
    background: #f3f3f3;
    border-radius: 100%;
    position: relative;
    overflow: hidden;
}

.teams li .imageWrap img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    margin-top: 1em;
    box-sizing: border-box;
    object-fit: cover;
    break-inside: avoid-column;
}

.teams li .imageWrap:before {
    content: "";
    display: block;
    padding-top: 100%;
}

.teams li .details {
    margin-left: 1em;
    width: calc(100% - 150px);
}

.teams li .top h2, 
.teams li .top h4 {
    margin: 0;
    color: #5A96D3;
}

.teams li .bottom {
    margin-top: 1em;
    opacity: 0;
    overflow: hidden;
    max-height: 0;
    background: #f3f3f3;
    transition: max-height 1.5s ease;
}

.teams li .bottom p {
    margin: 0;
    padding: 1em;
    box-szing: border-box;
}

.teams li .bottom#expanded {
    opacity: 1;
    overflow: hidden;
    max-height: 100px;
    transition: max-height 1.5s ease;
}

.teams li .expander {
    border-radius: 100%;
    background: #f3f3f3;
    height: 35px;
    width: 35px;
    padding: 0.5em;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: 0;
    cursor: pointer;
}

.teams li .expander span {
    text-align: center;
    display: block;
    user-select: none;
    transition: transform 0.5s ease;
}

.teams li .expander#closed > span {
    transform: rotate(0deg);
}

.teams li .expander#open > span {
    transform: rotate(-90deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="teams">
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
</ul>

您也可以试试 break-inside:avoid; https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside

$(".expander").click(function() {
  if($(this).attr("id") == "open") {
    $(this).attr("id", "closed");
    $(this).closest("li").find(".bottom").attr("id", "");
  }
  else {
    $(this).attr("id", "open");
    $(this).closest("li").find(".bottom").attr("id", "expanded");
  }
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

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

.teams li {
    padding: 1em;
    box-sizing: border-box;
    margin-bottom: 1em;
    break-inside: avoid;/* here */
}

.teams li .top {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: 150px;
    overflow: hidden;
}

.teams li .imageWrap {
    width: 150px;
    height: 150px;
    background: #f3f3f3;
    border-radius: 100%;
    position: relative;
    overflow: hidden;
}

.teams li .imageWrap img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    margin-top: 1em;
    box-sizing: border-box;
    object-fit: cover;
    break-inside: avoid-column;
}

.teams li .imageWrap:before {
    content: "";
    display: block;
    padding-top: 100%;
}

.teams li .details {
    margin-left: 1em;
    width: calc(100% - 150px);
}

.teams li .top h2, 
.teams li .top h4 {
    margin: 0;
    color: #5A96D3;
}

.teams li .bottom {
    margin-top: 1em;
    opacity: 0;
    overflow: hidden;
    max-height: 0;
    background: #f3f3f3;
    transition: max-height 1.5s ease;
}

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

.teams li .bottom#expanded {
    opacity: 1;
    overflow: hidden;
    max-height: 100px;
    transition: max-height 1.5s ease;
}

.teams li .expander {
    border-radius: 100%;
    background: #f3f3f3;
    height: 35px;
    width: 35px;
    padding: 0.5em;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: 0;
    cursor: pointer;
}

.teams li .expander span {
    text-align: center;
    display: block;
    user-select: none;
    transition: transform 0.5s ease;
}

.teams li .expander#closed > span {
    transform: rotate(0deg);
}

.teams li .expander#open > span {
    transform: rotate(-90deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="teams">
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
  
  <li>
    <div class="top">
      <div class="imageWrap">
        <img src="useruploads/user.png">
      </div>
      
      <div class="details">
        <h2>Employee Name</h2>
        <h4>Title</h4>
      </div>

      <div class="expander"><span><</span></div>
    </div>

    <div class="bottom">
      <p>Description</p>
    </div>
  </li>
</ul>

Answer 3

如果从CSS

显示呢

     $(".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");
             }

CSS 转换导致 ul 列中断

CSS transitions causing ul columns to break

css

transition