穆穆青风至 2021-07-14 07:53 采纳率: 97.4%
浏览 20
已采纳

为啥两个子元素没有预期的并排

当前代码，box2的两个子元素只能竖着如图排列，为啥没有并排，如果给box2加了宽，他们才能并排了

<html>
    <head>
        <style>
            div{
                width: 100px;
                height: 100px;

            }
            .box1{
                background-color: blue;
            }

![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/223014022626134.png)

            .box2{
                float: left;
            }
            .box2-son{
                background-color: chartreuse;
                float: left;
            }
            .box2-dau{
                background-color: red;
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2">
            <div class="box2-son"></div>
            <div class="box2-dau"></div>
        </div>
    </body>
</html>
  • 写回答

3条回答 默认 最新

  • 崽崽的谷雨 2021-07-14 08:51
    关注

    因为div{width:100px;height:100px}你把所有div都设置100px。两个块并排是200px。box2放不下就换行了

    <html>
    <head>
        <style>
            /* div{
                width: 100px;
                height: 100px;
            } */
            .box1{
                background-color: blue;
                width: 100px;
                height: 100px;
            }

            .box2{
                float: left;
            }
            .box2-son{
                background-color: chartreuse;
                float: left;
                width: 100px;
                height: 100px;
            }
            .box2-dau{
                background-color: red;
                float: left;
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2">
            <div class="box2-son"></div>
            <div class="box2-dau"></div>
        </div>
    </body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

问题事件

  • 已采纳回答 7月14日
  • 创建了问题 7月14日