Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[html] 第372天 实现九宫格布局 #2270

Open
haizhilin2013 opened this issue Apr 21, 2020 · 4 comments
Open

[html] 第372天 实现九宫格布局 #2270

haizhilin2013 opened this issue Apr 21, 2020 · 4 comments
Labels
html html

Comments

@haizhilin2013
Copy link
Collaborator

第372天 实现九宫格布局

我也要出题
@haizhilin2013 haizhilin2013 added the html html label Apr 21, 2020
@longhui520
Copy link 

       <style>
       .container::after{
           content: "";
           display: block;
           clear: both;
       }
       .box{
           float: left;
           width: 32%;
           padding-bottom: 32%;
           background-color: red;
           margin-bottom: 1%;
       }
       .box:not(:nth-child(3n)){
           margin-right: 1%;
       }
   </style>
   <div class="container">
       <div class="box"></div>
       <div class="box"></div>
       <div class="box"></div>
       <div class="box"></div>
       <div class="box"></div>
       <div class="box"></div>
       <div class="box"></div>
       <div class="box"></div>
       <div class="box"></div>
   </div>

1 similar comment
@longhui520
Copy link 

       <style>
       .container::after{
           content: "";
           display: block;
           clear: both;
       }
       .box{
           float: left;
           width: 32%;
           padding-bottom: 32%;
           background-color: red;
           margin-bottom: 1%;
       }
       .box:not(:nth-child(3n)){
           margin-right: 1%;
       }
   </style>
   <div class="container">
       <div class="box"></div>
       <div class="box"></div>
       <div class="box"></div>
       <div class="box"></div>
       <div class="box"></div>
       <div class="box"></div>
       <div class="box"></div>
       <div class="box"></div>
       <div class="box"></div>
   </div>

@censek
Copy link

censek commented Jun 11, 2020

grid 网格布局

.layout {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}
<div class="layout"></div>

image

@LinDaiDai LinDaiDai mentioned this issue Jun 23, 2020
Open
@zhaofeipeter
Copy link

zhaofeipeter commented Jul 26, 2020 •
edited
Loading

flex布局
<!DOCTYPE html>
<html>
<head>
　　<meta charset="utf-8">
　　<meta http-equiv="X-UA-Compatible" content="IE=edge">
　　<meta name="description" content="">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<title></title>
　　<style type="text/css">
.box{
height: 33vh;
flex: 0 0 33.1%;
background-color: gray;
margin: 2px;
}
　　</style>
</head>
<body>

<div style="display: flex; flex-wrap: wrap;">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>

@haizhilin2013 haizhilin2013 mentioned this issue Feb 8, 2021
Open
@haizhilin2013 haizhilin2013 mentioned this issue Mar 18, 2021
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
html html
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@haizhilin2013 @zhaofeipeter @censek @longhui520