【发布时间】：2016-07-13 19:02:31
【问题描述】：
如何将flexslider 中的文本垂直对齐到底部，就在页面控制元素的上方？
看图片中的例子。
应该可以将内部<div>设置为：
position: absolute;
bottom: 0;
但这不起作用，因为 <li>...</li> 条目没有完整高度。由于文本长度是动态的，因此会有不同的高度，因此文本应始终朝向页面控件的底部。
结果应该是这样的：
这是一个工作代码示例：
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
directionNav: false
});
});.flexslider {
width: 500px;
}
.flexslider ul, .flexslider ol {
margin: 0;
padding: 0;
}
blockquote, q {
font-size: 14px;
quotes: "»" "«" "›" "‹";
}
p.quoted {
font-size: 11px;
}
.flex-control-paging li {
float: left;
margin: 2px 4px 2px 0;
}
.flex-control-paging {
box-sizing: border-box;
float: left;
list-style: outside none none;
margin: -24px 0 0;
position: relative;
width: 100%;
z-index: 3;
}
.flex-control-paging a::before {
background-color: #b2b2b2;
content: "";
height: 3px;
left: 0;
position: absolute;
top: 15px;
width: 60px;
}
.flex-control-paging a {
border: 0 none;
cursor: pointer;
display: block;
height: 30px;
position: relative;
text-indent: -999em;
width: 62px;
}
.flex-control-paging .flex-active::before, .flex-control-paging .flex-active:hover::before {
background-color: #000000;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/woothemes/FlexSlider/master/jquery.flexslider-min.js" type="text/javascript"></script>
<div class="flexslider">
<ul class="slides">
<li><div><q>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</q> <p class="quoted">Lorem ipsum</p></div></li>
<li><div><q>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</q> <p class="quoted">Lorem ipsum</p></div></li>
<li><div><q>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</q> <p class="quoted">Lorem ipsum</p></div></li>
</ul>
</div>【问题讨论】：
-
我删除了我的答案，因为时间已经过去了，我不太了解 flexslider，无法快速修复。希望以后能有更多的时间。
-
抱歉给您带来了困惑，希望您现在明白我想要达到的目的。
-
我明白了，所以当滑块开始动画时，我在示例中创建的 CSS 规则会被覆盖，这意味着我需要深入了解
flexslider以了解它是如何做到的，所以我可以相应地更改 CSS（这需要比我知道的更多的时间）......所以其他人可能已经知道这一点，并且会在我有空闲时间之前给你一个答案 -
这会有帮助吗？ drupal.org/node/2217999
标签： jquery html css vertical-alignment flexslider