Вы когда-нибудь пытались расшифровать код веб-страницы и просто видеть группы ‹DIV› внутри еще ‹div› ……. ????
Ну просто расслабься, потому что это именно то, что есть.
По прошествии времени в программировании веб-разработки я понял, что просто растет способность вкладывать контейнеры в другие контейнеры, чтобы они выглядели так, как вы хотели. Это звучит довольно легко, но на практике может стать настоящей головной болью; вот почему я дам вам свой намек ... Надеюсь, вы все извлечете из этого какую-то выгоду.
Div Nesting может иметь все уровни сложности, которые вы можете себе представить, но на самом деле вам просто нужно беспокоиться о двух из них:
Во-первых, это div, который вы собираетесь изменить → Давайте, дайте ему класс CSS под названием «граница».
Не будем ждать и создадим наш класс css.
.border {
ширина границы: 5 пикселей;
border-color: («Цвет, который вам понравился, подсказка: он должен контрастировать»);
стиль границы: твердый;
}
Знайте, что мы можем визуально увидеть, как этот ‹div› он рендерится, и его общую ширину и длину, давайте дадим тот же класс его родителю ‹DIV›, чтобы мы могли знать, как эти двое взаимодействуют. Теперь мы можем видеть, сколько места находится на солнце ‹Div› потребляет его родственного родителя ‹DIV›, и мы можем сделать действительно точное предположение об их поведении, продолжить и изменить размер окна, чтобы увидеть их реакцию. ¿Ведут ли они себя так, как вы хотели? Что ж, теперь, когда мы знаем, что делаем, и у нас есть проблема, просто выберите подход, который вам удобнее вносить изменения, если вы используете чистый CSS, возможно, это будет с гибким контейнером или сеткой, или, может быть, вы используют интерфейсную платформу, такую как Bootstrap или Materialise, это не имеет значения, потому что это ваш способ создания материала. Я просто хотел сообщить вам, как попасть прямо в место изменения, чтобы я мог внести желаемые изменения, не теряя времени .
Здесь я проверяю средний месячный доход ‹div› → отзывчивость столбца на его родительский ‹DIV› → строку на рабочем столе.
Здесь я проверяю средний месячный доход ‹div› → отзывчивость столбца на его родительский ‹DIV› → строку в мобильном представлении.
Ура и надеюсь, что это может быть полезно для вас, как и для меня.
