css 井布局

2024-03-07 20:26:27

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>井</title> <style> .box { width: 300px; margin: 100px; overflow: hidden; }
.item { float: left; width: 100px; height: 100px; border: 1px solid #000; border-right: 0; border-bottom: 0; margin-left: -1px; margin-top: -1px; } </style> </head> <body> <div class="box"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </body> </html>

1、父元素设置宽度每行控制几个

2、子元素boder，且border-right/border-bottom设为0。通过margin负距隐藏border-top/border-lelft

码农公寓

相关文章