老师,后面该如何实现两个盒子叠加呀。感觉大盒子没用上

来源:2-11 编程练习

Vigorous阿炎

2020-10-20 09:28:16

<!DOCTYPE html>

<html>


<head>

    <meta charset="UTF-8">

    <title>边框</title>

    <style>

        /*补充代码*/

        

        

        .bd1{

            

            width:0;

            height:0;

            border:100px solid transparent;

            border-left-color:red;

            border-top-left-radius:90px;

            border-bottom-left-radius:90px;

        }

        .bd2{

           

            width:0;

            height:0;

            border:100px solid transparent;

            border-right-color:red;

            border-top-right-radius:90px;

            border-bottom-right-radius:90px

          

        }

        

     

    </style>

</head>


<body>

    <div class="box">

        <div class="bd1"></div>

        <div class="bd2"></div>

    </div>

</body>


</html>

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

写回答

1回答

好帮手慕码

2020-10-20

同学你好,两个盒子无法叠加是因为div是块级元素,默认独占一行。给.bd1设置浮动即可:

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

效果:

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

另外,确实外层box盒子没有用到,可以去掉。

0

0 学习 · 15276 问题

查看课程