如图，有哪些方法可实现如图效果
flex了解一下
定位吧，或者flex，
首先看你这个四周的div的作用，如果涉及到内部含有内容，可以考虑使用定位或者采用flex 布局，如果仅仅是四周有颜色块且同色，可以考虑border + clip-path 结合处理
<body bgcolor=#62374e style=margin:0+50;border:dashed+50px#fdc57b;clip-path:inset(50px+0>
以上答案是 https://cssbattle.dev/ 上 差不多题目的一个高分答案，你可以作为参考~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html,body{ height: 100%; margin: 0; } .wrapper{ height: 100%; display: grid; grid-template-columns: 100px 1fr 100px; grid-template-rows: 100px 1fr 100px; } .box{ border: 1px solid red; } </style> </head> <body> <div class="wrapper"> <div class="box"></div> <div></div> <div class="box"></div> <div></div> <div></div> <div></div> <div class="box"></div> <div></div> <div class="box"></div> </div> </body> </html>
flex方案
<!DOCTYPE html> <html> <head> <title>四边分部div</title> <style type="text/css"> html,body{ margin: 0 padding:0; width: 100%; height: 100%; } .flex{ display: flex; display: -webkit-flex; } .row{ flex-direction: row; } .col{ flex-direction: column; } .between{ justify-content: space-between; } .match{ width: 100%; height: 100%; } .w-match{ width: 100%; } .div{ border: 1px solid #000; padding:10%; } </style> </head> <body> <div class="match"> <div class="match flex col between"> <div class="flex row w-match between"> <div class="div">1</div> <div class="div">2</div> </div> <div class="flex row w-match between"> <div class="div">3</div> <div class="div">4</div> </div> </div> </div> </body> </html>
使用flex。然后两端对齐，设置每行显示两个
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
暂无简介
文章 0 评论 0
接受
发布评论
评论（6）
flex了解一下
定位吧，或者flex，
首先看你这个四周的div的作用，如果涉及到内部含有内容，可以考虑使用定位或者采用flex 布局，如果仅仅是四周有颜色块且同色，可以考虑border + clip-path 结合处理
以上答案是 https://cssbattle.dev/ 上 差不多题目的一个高分答案，你可以作为参考~
flex方案
使用flex。然后两端对齐，设置每行显示两个