如何将所有猫头鹰旋转木马项目设置为相等高度？

问题描述 投票：0回答：4

我正在研究猫头鹰旋转木马，当添加更多内容时，我希望所有项目具有相同的高度，但添加的项目高度不相等。我也尝试过使用 Flex 属性，但不明白为什么它不起作用。请任何人指出我真正陷入困境的正确方向。预先感谢

代码笔

预期输出

  $(document).ready(function() {    
    $('#article-carousel').owlCarousel({
          loop: true,
          autoplay: true,
          autoHeight: true,
          autoplayTimeout: 2000,
          margin: 10,
          dots: false,
          nav: true,
           responsive:{
            0: {
              items: 1,
            },
            768: {
              items: 4,
            },
            1024: {
              items: 4,
            },
            1100: {
              items: 4
            }           
          }
      })
   });
* {
      margin: 0;
      padding: 0;
  }
    .wrapper {
      position: relative;
      overflow: hidden;
    }
    .section-inner {
        position: relative;
        width: 100%;
        max-width: 1140px;
        margin: 0 auto;
    }
    .article-items {
        display: flex;
        flex: 1 0 auto;
    }
      .articles-wrap {
      position: relative;
      padding: 80px 0;
      background: #f7f5f2;
  }
  .article-title {
    font-family: "Filson Soft", sans-serif;
    font-size: 52px;
    font-weight: bold;
    letter-spacing: 1.06px;
    color: #3b3d4e;
    padding-bottom: 60px;
     padding-top: 40px;
  }
  .aticle-box {
      position: relative;
      overflow: hidden;
    margin-bottom: 80px;
  }
  .box-img { display: block; }
  .box-title {
      font-family: "Poppins", sans-serif;
      font-size: 24px;
      font-weight: 500;
      line-height: 1.42;
      letter-spacing: -0.51px;
      color: #000000;
      margin-bottom: 25px;
     }
    .box-content {
      font-family: "Poppins", sans-serif;
      font-size: 18px;
      font-weight: 300;
      line-height: 1.44;
      letter-spacing: -0.7px;
      color: #000000;
       padding: 30px 25px;
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        background: #ffffff;
    }
    .box-content p { opacity: 0.5; }
    .box-btn a {
      opacity: 0.2;
      font-family: "Poppins", sans-serif;
      font-size: 16px;
      font-weight: 500;
      color: #000000;
        padding-top: 30px;
        line-height: 2.63;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
     }
     .box-btn {
        position: relative;
        padding: 10px;
     }
     .article-img { position: relative; }
    <head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.theme.default.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/owl.carousel.min.js"></script>
  </head>
  
  <div class="wrapper">     
        <div class="articles-wrap">
            <div class="section-inner">
                <h2 class="article-title">News articles</h2>
                <div id="article-carousel" class="owl-carousel owl-theme">
                    <div class="item article-items">
                         <div class="aticle-box">
                            <figure><img class="box-img" src="https://i.ibb.co/SB6YwYC/blend2.jpg"></figure>
                            <div class="box-content">
                                <h4 class="box-title">News articles Title articles News articles Title article                   Titles</h4>
                                <p>Lorem ipsum dolor sit amet consectetur adipiscing elit Pellentesque libero</p>
                                <div class="box-btn">
                                    <span><a href="#">Read more</a></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item article-items">
                        <div class="aticle-box">
                            <figure><img class="box-img" src="https://i.ibb.co/SB6YwYC/blend2.jpg"></figure>
                            <div class="box-content">
                                <h4 class="box-title">News articles Title</h4>
                                <p>Lorem ipsum dolor sit amet consectetur adipiscing elit Pellentesque libero</p>
                                 <div class="box-btn">
                                    <span><a href="#">Read more</a></span>
                                </div>
                            </div>
                        </div>
                    </div>
                   <div class="item article-items">
                        <div class="aticle-box">
                            <figure><img class="box-img" src="https://i.ibb.co/SB6YwYC/blend2.jpg"></figure>
                            <div class="box-content">
                                <h4 class="box-title">News articles Title articles Title articles articles</h4>
                                <p>Lorem ipsum dolor sit amet consectetur adipiscing elit Pellentesque libero</p>
                                <div class="box-btn">
                                    <span><a href="#">Read more</a></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item article-items">
                        <div class="aticle-box">
                            <figure><img class="box-img" src="https://i.ibb.co/SB6YwYC/blend2.jpg"></figure>
                            <div class="box-content">
                                <h4 class="box-title">News articles Title</h4>
                                <p>Lorem ipsum dolor sit amet consectetur adipiscing elit Pellentesque libero</p>
                                <div class="box-btn">
                                    <span><a href="#">Read more</a></span>
                                </div>
                            </div>
                        </div>
                    </div>
                     <div class="item article-items">
                        <div class="aticle-box">
                            <figure><img class="box-img" src="https://i.ibb.co/SB6YwYC/blend2.jpg"></figure>
                            <div class="box-content">
                                <h4 class="box-title">News articles Title articles Title articles articles</h4>
                                <p>Lorem ipsum dolor sit amet consectetur adipiscing elit Pellentesque libero</p>
                                <div class="box-btn">
                                    <span><a href="#">Read more</a></span>
                                </div>
                            </div>
                        </div>
                    </div>
                     <div class="item article-items">
                         <div class="aticle-box">
                            <figure><img class="box-img" src="https://i.ibb.co/SB6YwYC/blend2.jpg"></figure>
                            <div class="box-content">
                                <h4 class="box-title">News articles Title</h4>
                                <p>ipsum dolor sit amet consectetur adipiscing elit Pellentesque libero</p>
                                <div class="box-btn">
                                    <span><a href="#">Read more</a></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> <!--carousel ends here-->
    </div>

html css carousel owl-carousel
4个回答
21
投票

尝试下面的CSS：

.owl-carousel .owl-stage{display: flex;}
.article-items {
    display: flex;
    flex: 1 0 auto;
    height: 100%;
}
.aticle-box {
    position: relative;
    overflow: hidden;
    /* margin-bottom: 80px; *//*This is optional*/
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
4
投票

不需要更多代码，只需执行以下CSS代码：

/*(1) owl-stage box*/
.owl-carousel .owl-stage { display: flex; }
/*(2) the direct div of each element in the owl carousel*/
.article-items { height: 100%; }

并且不要将 100% 添加到猫头鹰项目高度。

1
投票

解决方案仅适用于静态网站。

如果您使用卡片元素，那么您可以通过将所有元素的卡片图像和卡片主体的最小高度设置为所有卡片图像和所有卡片主体中观察到的最大高度来实现所有卡片的相同高度。例如：我有 5 个元素，其中元素的最大高度为 200px。在这种情况下，我可以实现以下代码：

 <div class="card" style="width: 18rem;">
     <div class="row align-items-center card-img-top mx-0 imageclass">
           <img src="..." class="img-fluid" alt="...">
     </div>
     <div class="card-body card-limiter">
           <h5 class="card-title">Lorem Ipsum</h5>
           <p class="card-text">Lorem Ipsum dolor sit amet.</p>
      </div>
 </div>

这是我使用的CSS：

.image-class {
   min-height: 240px;
   background-color: whitesmoke;
}

.card .card-limiter {
   min-height: 320px;
}

看一下我在下面附加的代码片段： 

$(document).ready(function() {
  $(".owl-carousel").owlCarousel({
    items: 3,
    itemsDesktop: [1000, 3],
    itemsDesktopSmall: [979, 2],
    itemsTablet: [768, 1],
    pagination: false,
    autoPlay: true
  });
});
.top-space {
  margin-top: 100px;
}

.image-class {
  min-height: 240px;
  background-color: whitesmoke;
}

.card .card-limiter {
  min-height: 320px;
}
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
  <!-- added owl-carousel, animate.css -->
  <title>Sample-Code</title>
</head>

<body>
  <div class="top-space container">
    <div class="owl-carousel text-center">
      <div class="mx-1 row justify-content-center">
        <div class="card" style="width: 18rem;">
          <div class="row align-items-center card-img-top mx-0 image-class">
            <img src="https://images.unsplash.com/photo-1494438639946-1ebd1d20bf85?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1347&q=80" class="img-fluid" alt="Sample Images">
          </div>
          <div class="card-body card-limiter">
            <h5 class="card-title">Lorem Ipsum</h5>
            <p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Excepturi accusantium praesentium, officiis aut deserunt repudiandae sequi id modi nemo esse culpa qui odio beatae, rem in obcaecati consequatur labore ut!</p>
          </div>
        </div>
      </div>
      <div class="mx-1 row justify-content-center">
        <div class="card" style="width: 18rem;">
          <div class="row align-items-center card-img-top mx-0 image-class">
            <img src="https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" class="img-fluid" alt="Sample Images">
          </div>
          <div class="card-body card-limiter">
            <h5 class="card-title">Lorem Ipsum</h5>
            <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse tempora sint at laboriosam aliquam tempore.</p>
          </div>
        </div>
      </div>
      <div class="mx-1 row justify-content-center">
        <div class="card" style="width: 18rem;">
          <div class="row align-items-center card-img-top mx-0 image-class">
            <img src="https://images.unsplash.com/photo-1504548840739-580b10ae7715?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" class="img-fluid" alt="Sample Images">
          </div>
          <div class="card-body card-limiter">
            <h5 class="card-title">Lorem Ipsum</h5>
            <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio, ad!</p>
          </div>
        </div>
      </div>
      <div class="mx-1 row justify-content-center">
        <div class="card" style="width: 18rem;">
          <div class="row align-items-center card-img-top mx-0 image-class">
            <img src="https://images.unsplash.com/photo-1487837647815-bbc1f30cd0d2?ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80" class="img-fluid" alt="Sample Images">
          </div>
          <div class="card-body card-limiter">
            <h5 class="card-title">Lorem Ipsum</h5>
            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, nostrum sed natus facere dolorem enim sunt sequi labore nobis nam qui reiciendis consequatur.</p>
          </div>
        </div>
      </div>
      <div class="mx-1 row justify-content-center">
        <div class="card" style="width: 18rem;">
          <div class="row align-items-center card-img-top mx-0 image-class">
            <img src="https://images.unsplash.com/photo-1484950763426-56b5bf172dbb?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="img-fluid" alt="Sample Images">
          </div>
          <div class="card-body card-limiter">
            <h5 class="card-title">Lorem Ipsum</h5>
            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, facilis accusamus necessitatibus distinctio corrupti vel quam ipsa quasi officiis deserunt.
            </p>
          </div>
        </div>
      </div>
      <div class="mx-1 row justify-content-center">
        <div class="card" style="width: 18rem;">
          <div class="row align-items-center card-img-top mx-0 image-class">
            <img src="https://images.unsplash.com/photo-1468956332313-2dcf1542828f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjc1MjQyfQ&auto=format&fit=crop&w=1350&q=80" class="img-fluid" alt="Sample Images">
          </div>
          <div class="card-body card-limiter">
            <h5 class="card-title">Lorem Ipsum</h5>
            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis harum saepe alias quos. Cum reiciendis, ullam, sapiente voluptatem soluta magnam delectus est expedita culpa iste nam reprehenderit molestiae adipisci nulla.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Optional JavaScript -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
</body>

</html>
1
投票

试试这个：

.owl-carousel .owl-stage{display: flex;}
.aticle-box {height:100%;background:#000} // change
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.