Flexslider垂直对齐到底部

Question

如何将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>

Answer 1

如果将元素vertical-align属性值设置为display，则可以使inline-block有效。

<强> E.g。

/** need to remove the float since we are now using `inline-block` */
.flexslider ul.slides li {
      float: none !important; 
      display: inline-block !important;
      vertical-align: bottom;
}

现在把它放到你当前的代码中：

$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    directionNav: false
  });
});

.flexslider {
    width: 500px;
}

.flexslider ul, .flexslider ol {
    margin: 0;
    padding: 0;
}

.flexslider ul.slides li {
  float: none !important;
  display: inline-block !important;
  vertical-align: bottom;
}

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>