Мобильная версияЯ создал структуру страницы с несколькими элементами div, но не могу добиться желаемого выравнивания. Я хочу выровнять некоторые элементы div по горизонтали, в то время как другие должны быть выровнены по вертикали. Я пробовал несколько вещей, но мне никогда не удавалось получить именно то, что я хочу, и у меня недостаточно опыта, чтобы знать, что делать... Я буду признателен немного помогите!
Вот что я попробовал (я новичок в программировании, поэтому понимаю, что это, вероятно, не самый эффективный способ сделать это):
HTML
ashsrollers.gif
ASH'S WORLD - это маленький электрический мир Эшли Кейн, веселая игра (bientôt, presque, elle compte les jours) 10 лет. Parce que chaque jour est une aventure, et au pays d'ASH, elles sont toujours Brightes.Projet inspiré d'un mix entre l'ethétique du web des années 2000 et les classics de jeux vidéos vidéos du, c'est par le biais du Пиксельная графика, которая воплощает в себе вселенную ASH, на этой планшетке с наклейками, эмулирующей то, что есть, и то, что персонажи веб-комиксов принадлежат собственным мультфильмам, играм в видео или в других играх. ashsworld.png
ashsds.png
ashsmag.png
CSS
.projeticon img { максимальная ширина: 10%; дисплей: гибкий; /* плавающее: вправо; */ } .projeticon { семейство шрифтов: «FT88-Regular»; цвет фона: синий; } .проектитр { поле внизу: 100 пикселей; } .проект { отступ: 2em; } #mydiv { z-индекс: 9; цвет фона: черный; отображение: встроенный блок; верх: 10 пикселей; плыть налево; поле внизу: 6em; граница: сплошная 1 пиксель #00ff33; размер коробки: граница-коробка; /* Гарантия, что весь хвост включает границу и отступы */ переполнение: скрыто; /* Убедитесь, что содержимое скрыто за маской, видимой снаружи элемента div */ } #mydiv изображение { ширина: 100%; /* Настройка значения для ваших вещей */ высота: авто; /* для сохранения пропорций изображения */ дисплей: блок; /* для удаления дополнительного пространства под изображением */ } #mydivheader { отступ: 10 пикселей; дисплей: гибкий; z-индекс: 10; семейство шрифтов: «FT88-Regular»; цвет фона: черный; выравнивание текста: по левому краю; цвет: #fff; оправдание-содержание: пространство между; /* Для восстановления пространства между детскими элементами */ выровнять-элементы: по центру; /* Выравниваем вертикальные элементы детских элементов */ } #mydivheader img { ширина: 10%; поле слева: авто; /* Правильное выравнивание изображения */ поле справа: 0; /* Убедитесь, что граница права равна нулю */ } Я разместил изображение, сравнивающее свой результат слева и эскиз макета, который я пытаюсь создать справа. Надеюсь, это достаточно ясно!
