- 15, May 2024
- #1
Все мои элементы div перемещаются, когда я изменяю размер окна. У меня есть ссылка на мое рабочее место в домике на дереве, чтобы вы могли понять, о чем я говорю. Просто нажмите «Предварительный просмотр рабочей области» в правом верхнем углу. Я также опубликую свой код ниже. https://w.trhou.se/054p1vz3tv
<голова> <мета-кодировка="utf-8"> <тело> Майкл
Кристина
.wrapper {
ширина: 497 пикселей;
высота: 100 пикселей;
маржа: 0 авто;
/* заполнение: 0 5%; */
дисплей: блок;
}
.Майкл {
цвет: #EEE8AA;
положение: относительное;
преобразование текста: верхний регистр;
размер шрифта: 30 пикселей;
плыть налево;
отображение: встроенный блок;
граница: 1 пиксель белая;
/* максимальная ширина: 100%; */
/* максимальная высота: 100%; */
/* осталось: 30%; */
/* верх: 0%; */
}
.м{
максимальная ширина: 100%;
максимальная высота 100%;
}
.Майкл{
}
.рингхед {
положение: относительное;
/* максимальная ширина: 100%; */
/* максимальная высота: 100%; */
плыть налево;
граница: 1 пиксель, сплошной черный;
отображение: встроенный блок;
/* осталось: 50%; */
/* верх: 4%; */
}
.кольцо{
максимальная ширина: 80%;
максимальная высота: 60%;
}
.Кристина {
цвет: #EEE8AA;
положение: относительное;
плыть налево;
сверло: 1 пиксель, сплошной черный;
/* верх: 0%; */
преобразование текста: верхний регистр;
размер шрифта: 30 пикселей;
отступ слева: 10%;
/* максимальная ширина: 100%; */
/* максимальная высота: 100%; */
}
.c{
максимальная ширина: 80%;
максимальная высота: 60%;
}
тело{
фоновое изображение: url("Изображения/Top Banner.jpg"), url("Изображения/Middle Banner.jpg"), url("Изображения/Bottom Banner.png");
размер фона: 100% 10%, 100% 15%, 100% 100%;
фоновый повтор: без повтора;
фоновое вложение: исправлено;
} .weddingВеб-сайт{ положение: фиксированное; верх: 55%; осталось: 55%; трансформировать: TranslateX(-55%) TranslateY(-55%); максимальная ширина: 80%; максимальная высота: 60%; } .свадьба{ максимальная ширина: 80%; максимальная высота: 60%; }
<голова> <мета-кодировка="utf-8"> <тело> Майкл
Кристина
.wrapper {
ширина: 497 пикселей;
высота: 100 пикселей;
маржа: 0 авто;
/* заполнение: 0 5%; */
дисплей: блок;
}
.Майкл {
цвет: #EEE8AA;
положение: относительное;
преобразование текста: верхний регистр;
размер шрифта: 30 пикселей;
плыть налево;
отображение: встроенный блок;
граница: 1 пиксель белая;
/* максимальная ширина: 100%; */
/* максимальная высота: 100%; */
/* осталось: 30%; */
/* верх: 0%; */
}
.м{
максимальная ширина: 100%;
максимальная высота 100%;
}
.Майкл{
}
.рингхед {
положение: относительное;
/* максимальная ширина: 100%; */
/* максимальная высота: 100%; */
плыть налево;
граница: 1 пиксель, сплошной черный;
отображение: встроенный блок;
/* осталось: 50%; */
/* верх: 4%; */
}
.кольцо{
максимальная ширина: 80%;
максимальная высота: 60%;
}
.Кристина {
цвет: #EEE8AA;
положение: относительное;
плыть налево;
сверло: 1 пиксель, сплошной черный;
/* верх: 0%; */
преобразование текста: верхний регистр;
размер шрифта: 30 пикселей;
отступ слева: 10%;
/* максимальная ширина: 100%; */
/* максимальная высота: 100%; */
}
.c{
максимальная ширина: 80%;
максимальная высота: 60%;
}
тело{
фоновое изображение: url("Изображения/Top Banner.jpg"), url("Изображения/Middle Banner.jpg"), url("Изображения/Bottom Banner.png");
размер фона: 100% 10%, 100% 15%, 100% 100%;
фоновый повтор: без повтора;
фоновое вложение: исправлено;
} .weddingВеб-сайт{ положение: фиксированное; верх: 55%; осталось: 55%; трансформировать: TranslateX(-55%) TranslateY(-55%); максимальная ширина: 80%; максимальная высота: 60%; } .свадьба{ максимальная ширина: 80%; максимальная высота: 60%; }