穆穆青风至 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日

悬赏问题

  • ¥15 如何删除这个虚拟音频
  • ¥50 hyper默认的default switch
  • ¥15 网站打不开,提示502 Bad Gateway
  • ¥20 基于MATLAB的绝热压缩空气储能系统代码咨询
  • ¥15 R语言建立随机森林模型出现的问题
  • ¥15 中级微观经济学,生产可能性边界问题
  • ¥15 TCP传输时不同网卡传输用时差异过大
  • ¥15 请各位看看我写的属于什么算法,或者有更正确的写法?
  • ¥15 html5 qrcode 扫描器
  • ¥15 爬取网页信息并保存需要完整代码