div上的类给幻灯片更高的高度

时间:2016-11-13 20:27:28

标签: html css

我想将幻灯片放在“为什么选择我们”[MySite] [1]的高度下,所以幻灯片与另一列保持一条直线,如下所示:

[![照片] [2] [2] 我试图设置类.videoHeight: {500px;},但是没有调用类。有人知道我必须设置哪个div类,以使高度合适吗?我在其他方面使用相同的幻灯片放映,因此高度仅适用于此幻灯片放映

<div class="pv-40 banner">
    <div class="container clearfix">

        <!-- slideshow start -->
        <!-- ================ -->
        <div class="slideshow">
            <div class="col-md-6">
            <!-- slider revolution start -->
            <!-- ================ -->
            <div class="slider-banner-container videoHeight">
                <div class="slider-banner-boxedwidth">
                    <ul class="slides">
                        <!-- slide 1 start -->
                        <!-- ================ -->
                        <li data-transition="random" data-slotamount="7" data-masterspeed="500" data-saveperformance="on" data-title="Premium HTML5 Template">

                        <!-- main image -->
                        <img src="images/slider-boxed-slide-1.jpg" alt="slidebg1" data-bgposition="center top"  data-bgrepeat="no-repeat" data-bgfit="cover">

                        <!-- Transparent Background -->
                        <div class="tp-caption dark-translucent-bg"
                            data-x="center"
                            data-y="bottom"
                            data-speed="600"
                            data-start="0">
                        </div>

                        <!-- LAYER NR. 1 -->
                        <div class="tp-caption sfb fadeout text-center large_white"
                            data-x="center"
                            data-y="110"
                            data-speed="500"
                            data-start="1000"
                            data-easing="easeOutQuad">Premium HTML5 Template
                        </div>  

                        <!-- LAYER NR. 2 -->
                        <div class="tp-caption sfb fadeout text-center large_white tp-resizeme hidden-xs"
                            data-x="center"
                            data-y="155"
                            data-speed="500"
                            data-start="1300"
                            data-easing="easeOutQuad"><div class="separator light"></div>
                        </div>  

                        <!-- LAYER NR. 3 -->
                        <div class="tp-caption sfb fadeout medium_white text-center hidden-xs"
                            data-x="center"
                            data-y="190"
                            data-speed="500"
                            data-start="1300"
                            data-easing="easeOutQuad"
                            data-endspeed="600">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br> Nesciunt, maiores, aliquid. Repellat eum numquam <br> culpa offici, tenetur fugiat dolorum sapiente...
                        </div>

                        <!-- LAYER NR. 4 -->
                        <div class="tp-caption sfb fadeout small_white text-center hidden-xs"
                            data-x="center"
                            data-y="300"
                            data-speed="500"
                            data-start="1600"
                            data-easing="easeOutQuad"
                            data-endspeed="600"><a href="#" class="btn btn-dark btn-animated">Read More <i class="fa fa-arrow-right"></i></a> <span class="pl-5 pr-5">or</span> <a href="page-contact.html" class="btn btn-default btn-animated">Contact Us <i class="fa fa-envelope"></i></a>
                        </div>

                        </li>
                        <!-- slide 1 end -->

                        <!-- slide 2 start -->
                        <!-- ================ -->
                        <li data-transition="random" data-slotamount="7" data-masterspeed="500" data-saveperformance="on" data-title="Clean and Simple Design">

                        <!-- main image -->
                        <img src="images/slider-boxed-slide-2.jpg" alt="slidebg2" data-bgposition="center top"  data-bgrepeat="no-repeat" data-bgfit="cover">

                        <!-- Transparent Background -->
                        <div class="tp-caption dark-translucent-bg"
                            data-x="center"
                            data-y="bottom"
                            data-speed="600"
                            data-start="0">
                        </div>

                        <!-- LAYER NR. 1 -->
                        <div class="tp-caption sfb fadeout text-center large_white"
                            data-x="center"
                            data-y="110"
                            data-speed="500"
                            data-start="1000"
                            data-easing="easeOutQuad">Clean and Simple Design
                        </div>  

                        <!-- LAYER NR. 2 -->
                        <div class="tp-caption sfb fadeout text-center large_white tp-resizeme hidden-xs"
                            data-x="center"
                            data-y="155"
                            data-speed="500"
                            data-start="1300"
                            data-easing="easeOutQuad"><div class="separator light"></div>
                        </div>  

                        <!-- LAYER NR. 3 -->
                        <div class="tp-caption sfb fadeout medium_white text-center hidden-xs"
                            data-x="center"
                            data-y="190"
                            data-speed="500"
                            data-start="1300"
                            data-easing="easeOutQuad"
                            data-endspeed="600">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br> Nesciunt, maiores, aliquid. Repellat eum numquam <br> culpa offici, tenetur fugiat dolorum sapiente...
                        </div>

                        <!-- LAYER NR. 4 -->
                        <div class="tp-caption sfb fadeout small_white text-center hidden-xs"
                            data-x="center"
                            data-y="300"
                            data-speed="500"
                            data-start="1600"
                            data-easing="easeOutQuad"
                            data-endspeed="600"><a href="#" class="btn btn-dark btn-animated">Read More <i class="fa fa-arrow-right"></i></a> <span class="pl-5 pr-5">or</span> <a href="page-contact.html" class="btn btn-default btn-animated">Contact Us <i class="fa fa-envelope"></i></a>
                        </div>

                        </li>
                        <!-- slide 2 end -->
                    </ul>
                    <div class="tp-bannertimer"></div>
                </div>
            </div>
            <!-- slider revolution end -->

        </div>
        <!-- slideshow end -->

    </div>
</div>
<!-- pv-40 banner end -->

2 个答案:

答案 0 :(得分:1)

CSS Way

您需要为min-height设置#accordion-2

#accordion-2 {
  min-height: 300px;
  border: 1px solid #ccc;
}

在上面的代码中,我使用了两件事。我会解释你原因:

  1. min-height由于有时内容超过min-height的{​​{1}},因此始终坚持使用height而不是height
  2. 300px我给了一个边框,以便向您显示border的{​​{1}}是正确的。没有边框,手风琴的背景与身体的背景融为一体,你将无法看到差异。
  3. preview

    HTML解决方案

    另一种方法是使用班级height作为横幅而不是300px

    preview

答案 1 :(得分:-1)

从幻灯片中删除课程 if($limit != null){ $this->db->limit($limit, $offset); } if($order_by != null){ $this->db->order_by($order_by, $sort); } $query = $this->db->get('courses'); $courses['rows'] = $query->result(); $courses['num_rows'] = $this->db->count_all('courses'); return $courses; ,因为它会为您添加顶部填充