Question

我为自己创建了一个投资组合页面，并且遇到了想要将链接与div底部对齐的问题，只有在您点击箭头时才会显示。我拍下了下拉列表的两种状态，它们是here和here。我的目标是在GitHub＆＃34;上对齐＆＃34; View。链接到底部，我已经尝试了大多数我发现建议的东西，但大多数都使用display：table-cell，它打破了开 - 关动画，或者他们建议相对和绝对定位，并不适用于我目前实施运动的方式。如果有人有想法，我们将不胜感激。

编辑：绝对和相对定位正确定位部分，但它没有跟随我正在寻找的扩展动画。

以下是相关部分的标记，样式和脚本：

＆＃13;

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

＆＃13;

.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;
}

#projects .slider {
  height: 300px;
}

#projects .slider ul {
  margin-bottom: 30px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

非常感谢你！

在jQuery下拉列表中将div的一部分内容与底部对齐

0 个答案: