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

如果将元素 display 属性的值设置为 inline-block.

，则可以使 vertical-align 起作用

例如

/** 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>

Flexslider 垂直对齐到底部

Flexslider vertical aligment to bottom

html

css

jquery

vertical-alignment

flexslider