代码之家 › 专栏 › 技术社区 › wittich Manish Shrivastava

Flexslider垂直对准底部

flexslider vertical-alignment css html jquery

2

wittich Manish Shrivastava · 技术社区 · 8 年前

如何在 flexslider 在页面控件元素的正上方?

请参见图片中的示例。

应该可以设置内部 <div> 收件人:

position: absolute;
bottom: 0;

但这不适用于 <li>...</li> 入口没有全高。由于文本长度是动态的,因此会有不同的高度,因此文本应始终朝向页面控件的底部。

结果应该是这样的:

result example

下面是一个工作代码示例:

$(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>

1 回复 | 直到 8 年前

1

Robin Carlo Catacutan 8 年前

你可以 vertical-align 如果设置了元素 display 属性值为 inline-block .

例如。

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