开心比较堵 2022-10-07 17:27 采纳率: 73.6%
浏览 47
已结题

css盒子布局浏览器的4个角落

css如何实现将4个盒子分别放在浏览器的4个角落呢?并且浏览器居中还放有一个盒子?

img

  • 写回答

2条回答 默认 最新

  • cchengze 2022-10-07 18:01
    关注
    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
            <div id="box-1" class="box">1</div>
            <div id="box-2" class="box">2</div>
            <div id="box-3" class="box">3</div>
            <div id="box-4" class="box">4</div>
            <div id="box-5" class="box">5</div>
        </body>
    </html>
    
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
    
        body {
            width: 100vw;
            height: 100vh;
        }
    
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
        }
    
        #box-1 {
            top: 0;
            left: 0;
        }
    
        #box-2 {
            top: 0;
            right: 0;
        }
    
        #box-3 {
            bottom: 0;
            left: 0;
        }
    
        #box-4 {
            bottom: 0;
            right: 0;
        }
    
        #box-5 {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 10月7日
  • 已采纳回答 10月7日
  • 创建了问题 10月7日

悬赏问题

  • ¥20 管道轴向耦合水击问题
  • ¥60 补全networkx TODO部分。
  • ¥15 有内推吗,云计算linux运维方向
  • ¥30 sort cuteSV.vcf by bcftools用IGV可视化出现报错
  • ¥100 SOS!对STK中导出的天体图像进行质心提取有没有人做过啊
  • ¥15 python 欧式距离
  • ¥15 运行qteasy报错
  • ¥15 遗传算法解决有工序顺序约束的大规模FJSP问题
  • ¥15 企业消防水炮塔设计方案
  • ¥20 WORKBENCH网格划分