问题描述
轮播图 DIV无法撑开父元素
问题出现的环境背景及自己尝试过哪些方法
相关代码
// 请把代码文本粘贴到下方（请勿用图片代替代码）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" href="https://weui.shanliwawa.top/css/weui.css" />
<script src="https://weui.shanliwawa.top/js/zepto.min.js"></script>
<script src="https://weui.shanliwawa.top/js/swipe.js"></script>
<style>
.container {position: absolute;top: 0;left: 0;right: 0;bottom: 1.0rem;overflow: auto;-webkit-overflow-scrolling: touch;}
.slide_box {position: relative;}
.slide {width:100%;overflow:hidden;position: relative;}
.slide ul { position: absolute;width:400%;}
.slide li {width:100%;float: left;}
.slide {position: relative;max-width: 100%;overflow: hidden;margin: 0 auto;}
.slide:after {content: '';display: block;width: 100%;padding-top: 50%; }
.slide ul {position: absolute;left: 0;top: 0;width: 100%;height: 100%; }
.slide li {list-style: none;position: absolute;left: 0;top: 0;width: 100%;height: 100%; }
.slide li:first-child {z-index: 1; }
.slide li img { position: absolute;left: 0;top: 0;width: 100%;height: 100%;border: none; }
.slide .dot {position: absolute;width: 100%;text-align: center;bottom: 1.0rem;z-index: 5;font-size: 0; }
.slide .dot span {display: inline-block;width: 6px;height: 6px;margin-left: 5px;border: 1px solid #fff;border-radius: 50%; }
.slide .dot .cur {background-color: #c9caca; }
.clearfloat{clear:both;height:0;font-size: 1px;line-height: 0px;}
</style>
</head>
<body ontouchstart>
<div class="container">
<div style="height:300px;background:#000;color:#fff"> 占位置 </div>
<div class="slide_box">
<!-- 轮播图start -->
<div class="slide" id="slide3">
<ul>
<li>
<a href="###">
<div class="ad-pic">
<img src="https://www.shong.net/file/upload/202111/26/20211126124314494.jpg" alt="">
</div>
<div class="ad-tit">啊大厦受打击啊空间的金卡就看到咯就开始</div>
</a>
</li>
<li>
<a href="###">
<div class="ad-pic">
<img src="https://www.shong.net/file/upload/202111/26/20211126124314494.jpg" alt="">
</div>
<div class="ad-tit">啊大厦受打击啊空间的金卡就看到咯就开始</div>
</a>
</li>
<li>
<a href="###">
<div class="ad-pic">
<img src="https://www.shong.net/file/upload/202111/26/20211126124314494.jpg" alt="">
</div>
<div class="ad-tit">啊大厦受打击啊空间的金卡就看到咯就开始</div>
</a>
</li>
<li>
<a href="###">
<div class="ad-pic">
<img src="https://www.shong.net/file/upload/202111/26/20211126124314494.jpg" alt="">
</div>
<div class="ad-tit">啊大厦受打击啊空间的金卡就看到咯就开始</div>
</a>
</li>
</ul>
<div class="dot">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- 轮播图end -->
<div class="clearfloat"></div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
// 轮播图
$('#slide3').swipeSlide({
autoSwipe: false, //自动切换默认是
continuousScroll: true,
lazyLoad: true,
speed: 3000,
transitionType: 'cubic-bezier(0.22, 0.69, 0.72, 0.88)',
firstCallback: function(i, sum, me) {
me.find('.dot').children().first().addClass('cur');
},
callback: function(i, sum, me) {
me.find('.dot').children().eq(i).addClass('cur').siblings().removeClass('cur');
}
});
});
</script>
</body>
</html>
你期待的结果是什么？实际看到的错误信息又是什么？
我想实现上面图片，下面文字描述的样式……
<div class="ad-tit">
这个标签的内容完全看不到。
待解决
悬赏分：20
- 离问题结束还有
点赞 0反对 0举报 0
收藏 0
分享 3
