Блог

Главная - Вопросы по программированию - Сохраняйте поля в правильных положениях после изменения размера окна

Сохраняйте поля в правильных положениях после изменения размера окна

#html #css #alignment

#HTML #css #выравнивание

Вопрос:

Я хочу создать полуреактивную индексную страницу с меню box. В формате fhd это выглядит неплохо, но если вы продолжаете изменять их размеры, их позиции искажаются. Я экспериментировал с @media в css, но это было бессмысленно.

Цель состоит в том, чтобы сохранять поля в 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>

Ответ №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. Вам всегда рады. Продолжайте работу. Удачи, приятель! 🙂