0
可以访问这个链接的代码片段https://codepen.io/arunkayathi/pen/dRPYzzdiv的高度和宽度并不固定在旋转木马滑块
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都始于相同的位置，而不是上升或下降。
基本上图像高度不固定，因此如果您想给标题固定的位置，请设置一个固定的高度。 – aavrug
我使用.project-info img设置图片高度 – arun
添加了一个片段签出。 – aavrug