#html #css #web #sass
#HTML #css #веб #sass
Вопрос:
Это один из моих проектов для дизайна навигации. Когда я растягиваю окно, эти повернутые div разбросаны.Может кто-нибудь подсказать мне, что я могу сделать в этом случае, я хочу, чтобы он всегда находился в одном и том же месте при изменении размера / масштаба окна. Спасибо за помощь. Результат на большом экране — это то, как должно выглядеть исходное размещение этих разделов, но когда я изменяю размер на меньший, эти разделы накладываются друг на друга
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
.main_div{
height:100vh;
width: 100%;
background-color: black;
position: relative;
margin: 0 auto;
}
.div1{
height: 100px;
width: 100px;
background: blue;
position: absolute;
top: 5%;
left:5%;
transform: rotate(45deg);
}
.div2{
height: 200px;
width: 200px;
background:red;
position: absolute;
top: 14%;
left:9%;
transform: rotate(45deg);
}
.div3{
height: 90px;
width: 90px;
background:white;
position: absolute;
top: 33%;
transform: rotate(45deg);
left:1%;
margin-left: 2%;
}
.div4{
height:90px;
width: 90px;
position: absolute;
background: green;
top:43%;
transform: rotate(45deg);
left:7%;
margin-left:0.7%;
}
.div5{
height: 100px;
width: 100px;
background:yellow;
position: absolute;
top: 53%;
left:13%;
transform: rotate(45deg);
} <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="nav.css">
</head>
<body>
<div class="main_div">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
<div class="div7"></div>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<script src="" async defer></script>
</body>
</html> Комментарии:
1. Если вы не хотите, чтобы элементы зависели от размера окна, используйте фиксированные значения пикселей вместо процентов.
Ответ №1:
Я бы сказал, расположите его относительно, потому что вы не хотите, чтобы divs перекрывались. Вместо абсолютной позиции используйте относительную позицию для divs и позиционируйте ее соответствующим образом. Пример:
position: relative; вместо position: absolute;
Комментарии:
1. хорошо, я попробую это, но когда я преобразовал эти% в px / rem, они не перекрываются. Спасибо за ответ.
Ответ №2:
Для этого вместо использования% используйте статическую единицу, такую как px, чтобы выровнять их по горизонтали и вертикали, что предотвратит их изменение размера, также не указывайте свой запас в%, поместите его в px. OR Вот решение, которое предотвратит искажение вашей структуры, но расстояние между окном левой границы и вашей структурой может отличаться. Ну, я сделал это только для двух прямоугольников, которые вы должны попробовать для остальных. Способы, которыми вы можете воспользоваться в своем коде, кроме одного: после указания левого и верхнего значений в vh, vw или% для div1, для остальных погружений дайте им левое и верхнее значение относительно вашего div1, для которого вы можете использовать
left:calc(div1_left_value additional_value_in_px);
Аналогично top, т.е.
top:calc(div1_top_value additional_value_in_px)
По сути, он статически размещает все ваши divs относительно позиции 1-го div.
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
.main_div{
height:100vh;
width: 100%;
background-color: black;
position: relative;
margin: 0 auto;
}
.div1{
height: 100px;
width: 100px;
background: blue;
position: absolute;
top: 20vh;
left:15vw;
transform: rotate(45deg);
}
.div2{
height: 200px;
width: 200px;
background:red;
position: absolute;
top: calc(20vh 100px);
left:calc(15vw 100px);
transform: rotate(45deg);
} <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="nav.css">
</head>
<body>
<div class="main_div">
<div class="div1"></div>
<div class="div2"></div>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<script src="" async defer></script>
</body>
</html>