Jquery Flexslider垂直对齐至底部

Jquery Flexslider垂直对齐至底部,jquery,html,css,vertical-alignment,flexslider,Jquery,Html,Css,Vertical Alignment,Flexslider,如何将页面中的文本垂直对齐设置为从页面控件元素的正上方到底部? 请参见图中的示例 应该可以将内部设置为: 位置:绝对位置; 底部:0; 但这不起作用,因为..条目没有达到完整高度。由于文本长度是动态的,因此会有不同的高度,因此文本应始终朝向页面控件的底部 结果应该是这样的: 这里有一个工作代码示例: $(窗口).load(函数(){ $('.flexslider').flexslider({ 动画:“幻灯片”, 方向导航:错误 }); }); .flexslider{ 宽度:500px

如何将页面中的文本垂直对齐设置为从页面控件元素的正上方到底部?

请参见图中的示例

应该可以将内部
设置为:

位置:绝对位置;
底部:0;
但这不起作用,因为
  • ..
  • 条目没有达到完整高度。由于文本长度是动态的,因此会有不同的高度,因此文本应始终朝向页面控件的底部

    结果应该是这样的:


    这里有一个工作代码示例:

    $(窗口).load(函数(){
    $('.flexslider').flexslider({
    动画:“幻灯片”,
    方向导航:错误
    });
    });
    
    .flexslider{
    宽度:500px;
    }
    .flexslider ul、.flexslider ol{
    保证金:0;
    填充:0;
    }
    区块报价,q{
    字体大小:14px;
    引号:“»”«“›”»;
    }
    p、 引用{
    字体大小:11px;
    }
    .flex控件分页li{
    浮动:左;
    利润率:2×4×2×0;
    }
    .flex控件分页{
    框大小:边框框;
    浮动:左;
    列表样式:外部无;
    利润率:-24px0;
    位置:相对位置;
    宽度:100%;
    z指数:3;
    }
    .flex控件分页a::before{
    背景色:#b2b2b2;
    内容:“;
    高度:3倍;
    左:0;
    位置:绝对位置;
    顶部:15px;
    宽度:60px;
    }
    .flex控件分页a{
    边界:0无;
    光标:指针;
    显示:块;
    高度:30px;
    位置:相对位置;
    文本缩进:-999em;
    宽度:62px;
    }
    .flex控件分页.flex活动::之前.flex控件分页.flex活动:悬停::之前{
    背景色:#000000;
    }
    
    
    • 他说:“我的工作是在工作中完成的,我的工作是在工作中完成的,我的工作是在工作中完成的。”

      Lorem ipsum

    • 他说:“我的工作是在工作中完成的,我的工作是在工作中完成的,我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦(Stet clita kasd gubergren),没有海洋保护区是属于同一领域的

      Lorem ipsum

    • 他说:“我的工作是在工作中完成的,我的工作是在工作中完成的,我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦(Stet clita kasd gubergren),没有海洋保护区是属于同一领域的。他说:“我的工作是在工作中完成的,我的工作是在工作中完成的,我的工作是在工作中完成的。”

      Lorem ipsum


    如果将元素
    显示
    属性值设置为
    内联块
    ,则可以使
    垂直对齐
    工作

    例如

    /** 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;
    }
    
    现在将其放在当前代码中:
    $(窗口).load(函数(){
    $('.flexslider').flexslider({
    动画:“幻灯片”,
    方向导航:错误
    });
    });
    
    .flexslider{
    宽度:500px;
    }
    .flexslider ul、.flexslider ol{
    保证金:0;
    填充:0;
    }
    .flexslider ul.li{
    浮动:无!重要;
    显示:内联块!重要;
    垂直对齐:底部对齐;
    }
    区块报价,q{
    字体大小:14px;
    引号:“»”«“›”»;
    }
    p、 引用{
    字体大小:11px;
    }
    .flex控件分页li{
    浮动:左;
    利润率:2×4×2×0;
    }
    .flex控件分页{
    框大小:边框框;
    浮动:左;
    列表样式:外部无;
    利润率:-24px0;
    位置:相对位置;
    宽度:100%;
    z指数:3;
    }
    .flex控件分页a::before{
    背景色:#b2b2b2;
    内容:“;
    高度:3倍;
    左:0;
    位置:绝对位置;
    顶部:15px;
    宽度:60px;
    }
    .flex控件分页a{
    边界:0无;
    光标:指针;
    显示:块;
    高度:30px;
    位置:相对位置;
    文本缩进:-999em;
    宽度:62px;
    }
    .flex控件分页.flex活动::之前.flex控件分页.flex活动:悬停::之前{
    背景色:#000000;
    }
    
    
    • 他说:“我的工作是在工作中完成的,我的工作是在工作中完成的,我的工作是在工作中完成的。”

      Lorem ipsum

    • 他说:“我的工作是在工作中完成的,我的工作是在工作中完成的,我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦(Stet clita kasd gubergren),没有海洋保护区是属于同一领域的

      Lorem ipsum

    • 他说:“我的工作是在工作中完成的,我的工作是在工作中完成的,我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦(Stet clita kasd gubergren),没有海洋保护区是属于同一领域的。他说:“我的工作是在工作中完成的,我的工作是在工作中完成的,我的工作是在工作中完成的。”

      Lorem ipsum


    我删除了我的答案,因为时间不多了,我对flexslider不太了解,无法快速修复。希望我以后能找到更多的时间。很抱歉搞混了,希望你现在理解了我想要实现的目标。我明白了,所以当滑块开始动画时,我在示例中创建的CSS规则会被覆盖,这意味着我需要将我的头插入
    flexslider
    来理解它是如何实现的,这样我就可以相应地更改CSS(这比我现在知道的要花更多的时间)…所以很可能其他人已经知道了这一点,在我有空闲时间之前会给你一个答案,这会有帮助吗?谢谢你的答案,这就是我一直在寻找的!@w