如何在jQuery下拉面板中将div内部分内容对齐到底部？

嗨，我来帮你搞定这个「View on GitHub」链接对齐到底部的问题！你之前遇到的table-cell破坏动画、绝对定位不跟随动画的困扰，用Flexbox布局就能完美解决，而且完全兼容slideToggle的展开/收起动画~

核心思路 #

slideToggle是基于元素的height属性做动画的，所以我们需要保持.slider的固定height，同时用Flexbox让内部的列表占满剩余空间，把链接自动推到底部。这样既不会破坏动画，又能实现底部对齐的效果。

具体修改步骤 #

1. 修复jQuery脚本中的选择器错误

你的脚本里少了类选择器的.，可能导致点击事件不生效，先修正这部分：

$(document).ready(function() {
  $(".slidebtn").click(function() {
    $(this).parent(".projects-arrow").prev(".slider").slideToggle(1000);
    $(this).children().toggleClass("fa-angle-double-up fa-angle-double-down");
  });
});

2. 修改.slider的CSS为Flex布局

调整.slider和内部列表的样式，让链接自动对齐到底部：

.projects-arrow { text-align: center; }
#projects .summary { font-style: italic; height: 70px; }
#projects .card .card-block { font-size: 15px; padding-bottom: 0; padding-top: 15px; text-align: justify; }
/* 关键修改：给slider添加Flex布局 */
#projects .slider { 
  height: 300px; 
  display: flex;
  flex-direction: column; /* 垂直方向排列子元素 */
}
#projects .slider ul { 
  margin-bottom: 30px; 
  flex-grow: 1; /* 让列表占满除链接外的所有剩余空间 */
}

3. 保留原HTML结构不变

你的HTML结构不需要改动，依然可以使用原来的代码：

<div class="card col-md-5">
  <h4 class="card-header">My portfolio</h4>
  <div class="card-block summary"> My portfolio page </div>
  <div class="card-block slider">
    <ul>
      <li>Used Materialize CSS and Bootstrap for the Front-end</li>
      <li>Back-end uses jQuery for few scripts</li>
      <li>Utilizes dynamic CSS properties as an effort to optimize it for multiple screen sizes</li>
      <li>Hosted on GitHub pages</li>
    </ul>
    <div class="projects-link">
      <a href="https://github.com/vghgergely/vghgergely.github.io" target="_blank"><strong>View on GitHub</strong></a>
    </div>
  </div>
  <div class="projects-arrow">
    <a class="slidebtn"><i class="fa fa-angle-double-down"></i></a>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

为什么这个方案有效？ #

• Flexbox布局仅在.slider内部调整元素位置，不会改变.slider本身的height值，所以slideToggle的展开/收起动画完全不受影响，链接会跟着面板一起平滑过渡。
• flex-grow:1让列表项自动填充面板的剩余空间，无论列表内容多少，链接都会稳稳地贴在底部。
• Flex本身是响应式的，适配移动端也毫无压力，完全符合你的移动实现逻辑。

内容的提问来源于stack exchange，提问作者gzaru