Question

我想制作一个带有框菜单的半响应式索引页面。虽然看起来不错，但如果继续调整它们的大小，它们的位置就会混乱。我在CSS中使用@media进行了实验，但这毫无意义。

目标是无论屏幕大小如何，都将框保持在2行和3 col位置。如果发现任何编码错误，请提醒我。

* {
	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>

Answer 1

您可以使用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>

调整窗口大小后，将框保持在正确的位置

1 个答案: