我想制作一个带有框菜单的半响应式索引页面。在 fhd 中它看起来不错，但如果你不断调整它们的大小，它们的位置就会变得困惑。我在 css 中尝试使用 @media，但毫无意义。
目标是无论屏幕大小如何，都将框保持在 2 行 3 列位置。如果您发现任何编码错误，请提醒我。
* {
margin: 0;
padding: 0;
}
body {
background-size: cover;
}
.undefinedheader {
width: 40%;
height: 30px;
background-color: grey;
margin: auto;
margin-top: 60px;
box-shadow: 0px 0px 40px -2px rgba(0,0,0,0.63);
border-radius: 5px;
font-family: 'Merriweather', serif;
font-size: 20px;
}
.container {
height: 420px;
background-color: blue;
top: 30%;
width:100%;
background-image: linear-gradient(to right top, #a62a71, #963680, #83408c, #6d4993, #565096, #4560a6, #2e70b2, #007fba, #009ed0, #00bee0, #1cddeb, #5ffbf1);
box-shadow: 0px 0px 40px -2px rgba(0,0,0,0.63);
transform: translateY(50%);
}
.internal-width {
padding: 0;
width: 85vmin;
margin-left: auto;
margin-right: auto;
}
.box
{
width: 220px;
height: 100px;
background-color: #22584F;
float: left;
margin-bottom: 50px;
margin-top: 50px;
transition: all 0.2s ease-in-out;
margin-right: 15px;
border-radius: 20px;
}
.box:hover
{
box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.4);
cursor: pointer;
transform: scale(1.1);
}
@media screen and (max-width: 1000px) {
.box{
float: none;
}
}<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "stylei.css" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
</head>
<body>
<div class="undefinedheader">
tu może być tyuł
</div>
<div class="container">
<div class="internal-width">
<div class="box"><a href=""></a></div>
<div class="box"><a href=""></a></div>
<div class="box"><a href=""></a></div>
<div class="box"><a href=""></a></div>
<div class="box"><a href=""></a></div>
<div class="box"><a href=""></a></div>
</div>
</div>
</body>最佳答案
您可以使用 CSS flex-box 来实现您的目标。
* {
margin: 0;
padding: 0;
}
body {
background-size: cover;
}
.undefinedheader {
width: 40%;
height: 30px;
background-color: grey;
margin: auto;
margin-top: 60px;
box-shadow: 0px 0px 40px -2px rgba(0,0,0,0.63);
border-radius: 5px;
font-family: 'Merriweather', serif;
font-size: 20px;
}
.container {
height: 420px;
background-color: blue;
top: 30%;
width:100%;
background-image: linear-gradient(to right top, #a62a71, #963680, #83408c, #6d4993, #565096, #4560a6, #2e70b2, #007fba, #009ed0, #00bee0, #1cddeb, #5ffbf1);
box-shadow: 0px 0px 40px -2px rgba(0,0,0,0.63);
transform: translateY(50%);
}
.internal-width {
padding: 0;
width: 85vmin;
margin-left: auto;
margin-right: auto;
display:flex;
flex-wrap: wrap;
justify-content:space-between;
}
.box{
flex-basis:calc(94% / 3);
height: 100px;
margin:1%!important;
background-color: #22584F;
transition: all 0.2s ease-in-out;
border-radius: 20px;
margin-bottom: 50px;
margin-top: 50px;
transition: all 0.2s ease-in-out;
}
.box:hover
{
box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.4);
cursor: pointer;
transform: scale(1.1);
}
@media screen and (max-width: 1000px) {
.box{
float: none;
}
}<div class="undefinedheader">
tu może być tyuł
</div>
<div class="container">
<div class="internal-width">
<div class="box"><a href=""></a></div>
<div class="box"><a href=""></a></div>
<div class="box"><a href=""></a></div>
<div class="box"><a href=""></a></div>
<div class="box"><a href=""></a></div>
<div class="box"><a href=""></a></div>
</div>
</div>关于html - 调整窗口大小后将框保持在正确位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55207913/