divs高度和宽度在旋转木马滑块中不固定

时间：2017-06-05 03:58:09

标签： javascript jquery html css twitter-bootstrap

访问此链接以获取代码段https://codepen.io/arunkayathi/pen/dRPYzz

HTML 

<html lang="en">

<head>

    <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i|Merriweather:300,400,700" rel="stylesheet">

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" />
    <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">


</head>

<body>
    <section id="projects">
        <div class="content-box">
            <div class="content-title wow animated fadeInDown" data-wow-duration="1s" data-wow-delay=".5s">
                <h3>My Projects</h3>
                <div class="content-title-underline"></div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div id="my-projects" class="owl-carousel owl-theme">
                            <div class="project-list">
                                <div class="project-image">
                                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp1-NNfLpNtsFQY25z7A4u9pp2D_vJHTNU70RDupydx4i7BrMKYw" class="img-responsive" alt="project-image1">
                                </div>
                                <div class="project-info text-center">
                                    <h5>Project Title</h5>
                                    <p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque minus voluptatibus obcaecati temporibus, eligendi harum in iusto quasi dicta. Sunt tempora magnam eveniet, adipisci modi quos maxime sint expedita repudiandae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
                                    <div class="project-btn">
                                        <a class="btn btn-lg btn-general btn-white" href="#" role="button" target="_blank">Visit Website</a>
                                    </div>

                                </div>
                            </div>
                            <div class="project-list">
                                <div class="project-image">
                                    <img src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" class="img-responsive" alt="project-image1">
                                </div>

                                <div class="project-info text-center">
                                    <h5>Project Title</h5>
                                    <p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas aliquid consequuntur . </p>
                                    <div class="project-btn">
                                        <a class="btn btn-lg btn-general btn-white" href="#" target="_blank">visit site</a>

                                    </div>

                                </div>
                            </div>
                            <div class="project-list">
                                <div class="project-image">
                                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQAOoZwRkgQ3KDjCJ2-GRtjKDc88iUqU6mJva17ym63D2W0XwnYw" class="img-responsive" alt="project-image1">
                                </div>
                                <div class="project-info text-center">
                                    <h5>Project Title</h5>
                                    <p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, omnis,  </p>
                                    <div class="project-btn">
                                        <a class="btn btn-lg btn-general btn-white" href="#" role="button" target="_blank">Visit site</a>
                                    </div>

                                </div>
                            </div>
                            <div class="project-list">
                                <div class="project-image">
                                    <img src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" class="img-responsive" alt="project-image1">
                                </div>
                                <div class="project-info text-center">
                                    <h5>Project Title</h5>
                                    <p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint similique earum labore quos quidem ab! Quibusdam fugit consectetur tenetur odit, fuga amet aliquam architecto modi sequi ea, delectus, quisquam atque.</p>
                                    <div class="project-btn">
                                        <a class="btn btn-lg btn-general btn-white" href="#projects" role="button">Visit site</a>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <body>

CSS 

    #projects {
    background-color: #f65d52;
    /*    background-color: #2098D1;*/
}

#projects .content-title h3 {
    color: #fff;
}



.project-info {
    padding: 25px 0 25px 0;
    color: #fff;

}

.project-info h5 {

    font-size: 25px;
    font-weight: 700;
}

.project-image img {
    max-width: 480px !important;
    max-height: 480px !important;
    margin: 0 auto;
    object-fit: contain;
}

.project-info-text {
    line-height: 170%;
    letter-spacing: 1px;
    color: #fff !important;
    font-weight: 500;
    width: 70%;
    margin: 0 auto;
}

.project-btn {
    padding-top: 30px;
}

JS 

$(document).ready(function () {
    $("#my-projects").owlCarousel({
        items: 1,
        autoplay: true,
        smartSpeed: 700,
        loop: true,
        autoplayHoverPause: true
    });

});

大家好，

我在旋转木马滑块中安排div时遇到问题。从上面的链接可以看出，每个滑动中项目标题的位置都在变化。所以有人可以帮我修复每个div的宽度和高度，这样文本和图像就不会溢出，而且在每个幻灯片中所有div都从相同的位置，而不是上升或下降。

4 个答案:

答案 0 :(得分：0)

你的图像需要一个固定的高度，否则会被推倒或向上。 如果你不能在图像上设置一个固定的高度，那么我建议只是项目标题和描述div的固定位置。也许让它绝对是它的父母。

答案 1 :(得分：0)

只需使用固定高度的图像：

.project-image img {
    width: 100%;
    max-width: 480px;
    height: 480px;
    margin: 0 auto;
}

答案 2 :(得分：0)

尝试此操作，为图像设置固定高度。

＆＃13;
＆＃13; 
$(document).ready(function () {
  $("#my-projects").owlCarousel({
    items: 1,
    autoplay: true,
    smartSpeed: 700,
    loop: true,
    autoplayHoverPause: true
  });
});
＆＃13; 
#projects {
  background-color: #f65d52;
  /*background-color: #2098D1;*/
}

#projects .content-title h3 {
  color: #fff;
}

.project-info {
  padding: 25px 0 25px 0;
  color: #fff;
}

.project-info h5 {
  font-size: 25px;
  font-weight: 700;
}

.project-image img {
  max-width: 480px !important;
  max-height: 480px !important;
  margin: 0 auto;
  object-fit: contain;
  height: 340px;
}

.project-info-text {
  line-height: 170%;
  letter-spacing: 1px;
  color: #fff !important;
  font-weight: 500;
  width: 70%;
  margin: 0 auto;
}

.project-btn {
  padding-top: 30px;
}
＆＃13; 
<head>

  <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i|Merriweather:300,400,700" rel="stylesheet">

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" />
  <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
</head>

<body>
  <section id="projects">
    <div class="content-box">
        <div class="content-title wow animated fadeInDown" data-wow-duration="1s" data-wow-delay=".5s">
            <h3>My Projects</h3>
            <div class="content-title-underline"></div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div id="my-projects" class="owl-carousel owl-theme">
                        <div class="project-list">
                            <div class="project-image">
                                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp1-NNfLpNtsFQY25z7A4u9pp2D_vJHTNU70RDupydx4i7BrMKYw" class="img-responsive" alt="project-image1">
                            </div>
                            <div class="project-info text-center">
                                <h5>Project Title</h5>
                                <p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque minus voluptatibus obcaecati temporibus, eligendi harum in iusto quasi dicta. Sunt tempora magnam eveniet, adipisci modi quos maxime sint expedita repudiandae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
                                <div class="project-btn">
                                    <a class="btn btn-lg btn-general btn-white" href="#" role="button" target="_blank">Visit Website</a>
                                </div>

                            </div>
                        </div>
                        <div class="project-list">
                            <div class="project-image">
                                <img src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" class="img-responsive" alt="project-image1">
                            </div>

                            <div class="project-info text-center">
                                <h5>Project Title</h5>
                                <p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas aliquid consequuntur . </p>
                                <div class="project-btn">
                                    <a class="btn btn-lg btn-general btn-white" href="#" target="_blank">visit site</a>

                                </div>

                            </div>
                        </div>
                        <div class="project-list">
                            <div class="project-image">
                                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQAOoZwRkgQ3KDjCJ2-GRtjKDc88iUqU6mJva17ym63D2W0XwnYw" class="img-responsive" alt="project-image1">
                            </div>
                            <div class="project-info text-center">
                                <h5>Project Title</h5>
                                <p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, omnis,  </p>
                                <div class="project-btn">
                                    <a class="btn btn-lg btn-general btn-white" href="#" role="button" target="_blank">Visit site</a>
                                </div>

                            </div>
                        </div>
                        <div class="project-list">
                            <div class="project-image">
                                <img src="https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg" class="img-responsive" alt="project-image1">
                            </div>
                            <div class="project-info text-center">
                                <h5>Project Title</h5>
                                <p class="project-info-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint similique earum labore quos quidem ab! Quibusdam fugit consectetur tenetur odit, fuga amet aliquam architecto modi sequi ea, delectus, quisquam atque.</p>
                                <div class="project-btn">
                                    <a class="btn btn-lg btn-general btn-white" href="#projects" role="button">Visit site</a>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
  </section>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
</body>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

添加responsiveClass以设置所有幻灯片响应。

 $(document).ready(function () {
        $("#my-projects").owlCarousel({
            items: 1,
            autoplay: true,
            smartSpeed: 700,
            loop: true,
            autoplayHoverPause: true,
            responsiveClass:true
        });

    });
相关问题
最新问题