轮播图 DIV无法撑开父元素

问题描述

轮播图 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;/*height: 4.50rem;*//**/}
        .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="http://d10.yihaodianimg.com/N07/M09/26/8B/CgQI0FQFd8-ACrb7AADBtSan3a084000.jpg" alt="">
                            </div>
                            <div class="ad-tit">啊大厦受打击啊空间的金卡就看到咯就开始</div>
                        </a>
                    </li>
                    <li>
                        <a href="###">
                            <div class="ad-pic">
                                <img src="http://d10.yihaodianimg.com/N07/M09/26/8B/CgQI0FQFd8-ACrb7AADBtSan3a084000.jpg" alt="">
                            </div>
                            <div class="ad-tit">啊大厦受打击啊空间的金卡就看到咯就开始</div>
                        </a>
                    </li>
                    <li>
                        <a href="###">
                            <div class="ad-pic">
                                <img src="http://d10.yihaodianimg.com/N07/M09/26/8B/CgQI0FQFd8-ACrb7AADBtSan3a084000.jpg" alt="">
                            </div>
                            <div class="ad-tit">啊大厦受打击啊空间的金卡就看到咯就开始</div>
                        </a>
                    </li>
                    <li>
                        <a href="###">
                            <div class="ad-pic">
                                <img src="http://d10.yihaodianimg.com/N07/M09/26/8B/CgQI0FQFd8-ACrb7AADBtSan3a084000.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">

这个标签的内容完全看不到。

阅读 2.8k
4 个回答

……得不到解决呀

光是看你代码的话,你的样式内并没有修饰ad-tit的样式啊
尝试加一句
.ad-tit{position:absolute;}
需要其他样式的自己添加即可

a标签转换为块级元素,a标签嵌套块级元素是非法操作

主要是css样式上的问题,
这里a标签可以先display:block,img标签不要直接绝对定位,正常设宽高就行,至于<div class="ad-tit">定位到a标签上即可

参考代码

.slide li img { width: 100%;height: 100%;border: none; }

<li>
    <a href="###" style="display:block;position:relative">
        <div class="ad-pic">
            <img src="http://d10.yihaodianimg.com/N07/M09/26/8B/CgQI0FQFd8-ACrb7AADBtSan3a084000.jpg" alt="">
        </div>
        <div class="ad-tit" style="position:absolute;top:0;left:0">啊大厦受打击啊空间的金卡就看到咯就开始111</div>
    </a>
</li>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题