如何通过更改它们的编号使所有 div 标签响应。 列数

Question

我创建了一个简单的网页，但是当我在移动设备上打开一个网页时，它看起来很丑，所有的 div 容器看起来都很大。 所以我想要的改变是当我在移动设备上打开这个网页时，列数应该减少到 3 并且没有。 行数应相应增加。 我知道我需要使用媒体查询，但我不知道如何减少 no。 的列。 我尝试了很多次，但是当我减少它时，所有容器都重叠了。

 * { margin: 0px; padding: 0px; } body { background-color: #485461; background-image: linear-gradient(315deg, #485461 0%, #28313b 74%); font-family: 'RobotoDraft', 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; } * { -webkit-box-sizing: border-box; box-sizing: border-box; } h5 { margin: 0px; font-size: 1.4em; font-weight: 700; } p { font-size: 12px; }.center { height: 75vh; width: 100%; display: flex; justify-content: center; align-items: center; } /* End Non-Essential */ #video, #vd, #vd1, #vd4, #vd5, #vd6, #vd7, #vd8 { height: 18em; width: 14em; display: none; object-fit: cover }.property-card { margin: 5px; height: 18em; width: 14em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; -webkit-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); border-radius: 16px; overflow: hidden; -webkit-box-shadow: 15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff; box-shadow: 15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff; } /* ^-- The margin bottom is necessary for the drop shadow otherwise it gets clipped in certain cases. */ /* Top Half of card, image. */.property-image { height: 15em; width: 14em; padding: 1em 2em; position: Absolute; top: 0px; -webkit-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); background-image: url('https://cdn.photographylife.com/wp-content/uploads/2017/01/What-is-landscape-photography.jpg'); background-size: cover; background-repeat: no-repeat; } /* Bottom Card Section */.property-description { background-color: #FAFAFC; height: 5em; width: 14em; position: absolute; bottom: 0em; -webkit-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); padding: 0.5em 1em; text-align: center; } /* Social Icons */.property-social-icons { width: 1em; height: 1em; background-color: black; position: absolute; bottom: 1em; left: 1em; -webkit-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); } /* Property Cards Hover States */.property-card:hover.property-description { height: 0em; padding: 0px 1em; }.property-card:hover.property-image { background-size: cover; }.property-card:hover.property-social-icons { background-color: white; }.property-card:hover.property-social-icons:hover { background-color: transparent; } @media (min-width: 600px) { }

 <div class="center"> <div class="property-card" id="property-card"> <div onmousedown="f1()" class="property-image" id="image"> <div class="property-image-title"></div> </div> <video id="video" width="640" height="480" controls> <source src="saiyaan-video.mp4"> </video> <div class="property-description"> <h5> Card Title </h5> <p>Lorem Ipsum Dipsum hortata. Mixcall Horcho. Mixwell Chingo. More Bingo. Lorem Ipum doth be hard.</p> </div> </div> <div class="property-card"> <div onmousedown="f2()" class="property-image" id="ig"> <div class="property-image-title"></div> </div> <video id="vd" width="640" height="480" controls> <source src="Te amo.mp4"> </video> <div class="property-description"> <h5> Card Title </h5> <p>Lorem Ipsum Dipsum hortata. Mixcall Horcho. Mixwell Chingo. More Bingo. Lorem Ipum doth be hard.</p> </div> </div> <div class="property-card"> <div onmouseover="f3()" class="property-image" id="ig1"> <div class="property-image-title"></div> </div> <video id="vd1"> <source control src="Pexels Videos 2795749.mp4" type="video/webm"> </video> <div class="property-description"> <h5> Card Title </h5> <p>Lorem Ipsum Dipsum hortata. Mixcall Horcho. Mixwell Chingo. More Bingo. Lorem Ipum doth be hard.</p> </div> </div> <div class="property-card"> <div onmouseover="f7()" class="property-image" id="ig7"> <div class="property-image-title"></div> </div> <video id="vd7"> <source control src="Pexels Videos 2795749.mp4" type="video/webm"> </video> <div class="property-description"> <h5> Card Title </h5> <p>Lorem Ipsum Dipsum hortata. Mixcall Horcho. Mixwell Chingo. More Bingo. Lorem Ipum doth be hard.</p> </div> </div> </div> <div class="center"> <div class="property-card"> <a href="#"> <div onmouseover="f4()" class="property-image" id="ig4"> <div class="property-image-title"></div> </div> <video id="vd4"> <source control src="Pexels Videos 2795749.mp4" type="video/webm"> </video> </a> <div class="property-description"> <h5> Card Title </h5> <p>Lorem Ipsum Dipsum hortata. Mixcall Horcho. Mixwell Chingo. More Bingo. Lorem Ipum doth be hard.</p> </div> </div> <div class="property-card"> <a href="#"> <div onmouseover="f5()" class="property-image" id="ig5"> <div class="property-image-title"></div> </div> <video id="vd5"> <source control src="Pexels Videos 2795749.mp4" type="video/webm"> </video> </a> <div class="property-description"> <h5> Card Title </h5> <p>Lorem Ipsum Dipsum hortata. Mixcall Horcho. Mixwell Chingo. More Bingo. Lorem Ipum doth be hard.</p> </div> </div> <div class="property-card"> <a href="#"> <div onmouseover="f6()" class="property-image" id="ig6"> <div class="property-image-title"></div> </div> <video id="vd6"> <source control src="Pexels Videos 2795749.mp4" type="video/webm"> </video> </a> <div class="property-description"> <h5> Card Title </h5> <p>Lorem Ipsum Dipsum hortata. Mixcall Horcho. Mixwell Chingo. More Bingo. Lorem Ipum doth be hard.</p> </div> </div> <div class="property-card"> <a href="#"> <div onmouseover="f8()" class="property-image" id="ig8"> <div class="property-image-title"></div> </div> <video id="vd8"> <source control src="Pexels Videos 2795749.mp4" type="video/webm"> </video> </a> <div class="property-description"> <h5> Card Title </h5> <p>Lorem Ipsum Dipsum hortata. Mixcall Horcho. Mixwell Chingo. More Bingo. Lorem Ipum doth be hard.</p> </div> </div> </div>

Answer 1

尝试添加flex-wrap: wrap; 到父级，以便卡片在空间不足时流到下一行。 您还必须删除height: 75vh; 从容器中防止它们重叠：

 * { margin: 0px; padding: 0px; } body { background-color: #485461; background-image: linear-gradient(315deg, #485461 0%, #28313b 74%); font-family: 'RobotoDraft', 'Roboto', sans-serif; -webkit-font-smoothing: antialiased; } * { -webkit-box-sizing: border-box; box-sizing: border-box; } h5 { margin: 0px; font-size: 1.4em; font-weight: 700; } p { font-size: 12px; }.center { width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } /* End Non-Essential */ #video, #vd, #vd1, #vd4, #vd5, #vd6, #vd7, #vd8 { height: 18em; width: 14em; display: none; object-fit: cover }.property-card { margin: 5px; height: 18em; width: 14em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; -webkit-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); border-radius: 16px; overflow: hidden; -webkit-box-shadow: 15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff; box-shadow: 15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff; } /* ^-- The margin bottom is necessary for the drop shadow otherwise it gets clipped in certain cases. */ /* Top Half of card, image. */.property-image { height: 15em; width: 14em; padding: 1em 2em; position: Absolute; top: 0px; -webkit-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); background-image: url('https://cdn.photographylife.com/wp-content/uploads/2017/01/What-is-landscape-photography.jpg'); background-size: cover; background-repeat: no-repeat; } /* Bottom Card Section */.property-description { background-color: #FAFAFC; height: 5em; width: 14em; position: absolute; bottom: 0em; -webkit-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); padding: 0.5em 1em; text-align: center; } /* Social Icons */.property-social-icons { width: 1em; height: 1em; background-color: black; position: absolute; bottom: 1em; left: 1em; -webkit-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); } /* Property Cards Hover States */.property-card:hover.property-description { height: 0em; padding: 0px 1em; }.property-card:hover.property-image { background-size: cover; }.property-card:hover.property-social-icons { background-color: white; }.property-card:hover.property-social-icons:hover { background-color: transparent; } @media (min-width: 600px) {}

 <div class="center"> <div class="property-card" id="property-card"> <div class="property-image" id="image"> <div class="property-image-title"></div> </div> <video id="video" width="640" height="480" controls> <source src="saiyaan-video.mp4"> </video> <div class="property-description"> <h5> Card Title </h5> <p>Lorem Ipsum Dipsum hortata. Mixcall Horcho. Mixwell Chingo. More Bingo. Lorem Ipum doth be hard.</p> </div> </div> <div class="property-card"> <div class="property-image" id="ig"> <div class="property-image-title"></div> </div> <video id="vd" width="640" height="480" controls> <source src="Te amo.mp4"> </video> <div class="property-description"> <h5> Card Title </h5> <p>Lorem Ipsum Dipsum hortata. Mixcall Horcho. Mixwell Chingo. More Bingo. Lorem Ipum doth be hard.</p> </div> </div> <div class="property-card"> <div class="property-image" id="ig1"> <div class="property-image-title"></div> </div> <video id="vd1"> <source control src="Pexels Videos 2795749.mp4" type="video/webm"> </video> <div class="property-description"> <h5> Card Title </h5> <p>Lorem Ipsum Dipsum hortata. Mixcall Horcho. Mixwell Chingo. More Bingo. Lorem Ipum doth be hard.</p> </div> </div> <div class="property-card"> <div class="property-image" id="ig7"> <div class="property-image-title"></div> </div> <video id="vd7"> <source control src="Pexels Videos 2795749.mp4" type="video/webm"> </video> <div class="property-description"> <h5> Card Title </h5> <p>Lorem Ipsum Dipsum hortata. Mixcall Horcho. Mixwell Chingo. More Bingo. Lorem Ipum doth be hard.</p> </div> </div> </div> <div class="center"> <div class="property-card"> <a href="#"> <div class="property-image" id="ig4"> <div class="property-image-title"></div> </div> <video id="vd4"> <source control src="Pexels Videos 2795749.mp4" type="video/webm"> </video> </a> <div class="property-description"> <h5> Card Title </h5> <p>Lorem Ipsum Dipsum hortata. Mixcall Horcho. Mixwell Chingo. More Bingo. Lorem Ipum doth be hard.</p> </div> </div> <div class="property-card"> <a href="#"> <div class="property-image" id="ig5"> <div class="property-image-title"></div> </div> <video id="vd5"> <source control src="Pexels Videos 2795749.mp4" type="video/webm"> </video> </a> <div class="property-description"> <h5> Card Title </h5> <p>Lorem Ipsum Dipsum hortata. Mixcall Horcho. Mixwell Chingo. More Bingo. Lorem Ipum doth be hard.</p> </div> </div> <div class="property-card"> <a href="#"> <div class="property-image" id="ig6"> <div class="property-image-title"></div> </div> <video id="vd6"> <source control src="Pexels Videos 2795749.mp4" type="video/webm"> </video> </a> <div class="property-description"> <h5> Card Title </h5> <p>Lorem Ipsum Dipsum hortata. Mixcall Horcho. Mixwell Chingo. More Bingo. Lorem Ipum doth be hard.</p> </div> </div> <div class="property-card"> <a href="#"> <div class="property-image" id="ig8"> <div class="property-image-title"></div> </div> <video id="vd8"> <source control src="Pexels Videos 2795749.mp4" type="video/webm"> </video> </a> <div class="property-description"> <h5> Card Title </h5> <p>Lorem Ipsum Dipsum hortata. Mixcall Horcho. Mixwell Chingo. More Bingo. Lorem Ipum doth be hard.</p> </div> </div> </div>