css如何实现将4个盒子分别放在浏览器的4个角落呢?并且浏览器居中还放有一个盒子?
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>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥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键失灵