老师我的.btn盒子没有设置宽高,但是设置了相对定位和浮动。里面的img图片设置了绝对定位,为什么图片不能把外面的盒子撑起来呢?外面的盒子应该形成了BFC才对啊

来源:5-2 项目作业

ZZD271X

2020-11-08 23:20:44



# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码,切记添加代码注释(请勿截图)

<section class="product content-part clearfix">

        <div class="center-wrap">

            <div class="btn-left btn">

                <img class="black" src="images/prev.png" alt="">

                <img class="blue" src="images/prev_active.png" alt="">

            </div>

            <div class="btn-right btn">

                <img class="black" src="images/next.png" alt="">

                <img class="blue" src="images/next_active.png" alt="">

            </div>

        </div>

 </section>




.product .btn {

    margin-top:98px;

    cursor:pointer;

    position:relative;

}

.product .btn-left {

    float:left;

}

.product .btn-right {

    float:right;

}

.product .btn img {

    position:absolute;

    left:0;

    top:0;

}

http://img.mukewang.com/climg/5fa80b9808808b1e16000900.jpg

在这里输入代码,可通过选择【代码语言】突出显示

写回答

1回答

好帮手慕星星

2020-11-10

同学你好,是图片设置定位的原因,设置绝对定位脱离文档流,所以撑不起.btn盒子宽高。即使.btn盒子设置浮动形成BFC,也是不可以的。

可以将定位去掉看看:

http://img.mukewang.com/climg/5faa612f09989ac503270135.jpg

http://img.mukewang.com/climg/5faa612709b9fc1502550126.jpg

祝学习愉快!​

1
hZD271X
h 谢谢老师,现在明白了。
h020-11-10
共1条回复

0 学习 · 15276 问题

查看课程