制作网页时块区域怎么才能不移动到一下一行？急！！

问题遇到的现象和发生背景

红色区域怎么移动到上方右边空白区域（公告栏位置）？不管怎么设置都会换行到下面！怎么办啊啊

问题相关代码

img

img

img

我想要达到的结果

img

img


分为3块 使用flex


<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">

        <style>
            .box{
                display: flex;
            }
            .dd{
                width: 300px;
                height: 300px;
                background: red;
                margin-left: 50px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="dd">
                
            </div>
            <div class="dd"></div>
            <div class="dd"></div>
        </div>
    </body>

</html>

img


display: flex;就好了

给这上面这个整体一个display:flex就会全部显示在一行了

img

你左边那两个设置的宽度是多少

img