穆穆青风至 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 metadata提取的PDF元数据，如何转换为一个Excel
  • ¥15 关于arduino编程toCharArray()函数的使用
  • ¥100 vc++混合CEF采用CLR方式编译报错
  • ¥15 coze 的插件输入飞书多维表格 app_token 后一直显示错误，如何解决？
  • ¥15 vite+vue3+plyr播放本地public文件夹下视频无法加载
  • ¥15 c#逐行读取txt文本，但是每一行里面数据之间空格数量不同
  • ¥50 如何openEuler 22.03上安装配置drbd
  • ¥20 ING91680C BLE5.3 芯片怎么实现串口收发数据
  • ¥15 无线连接树莓派，无法执行update，如何解决？（相关搜索：软件下载）
  • ¥15 Windows11, backspace, enter, space键失灵