Станьте веб-разработчиком с нуля за 15 месяцев на курсе онлайн-университета Skypro. Преподаватели — практикующие эксперты из VK, «Альфа-Банка», Skyeng и других крупных компаний. В программе нет лишней теории, зато много практических заданий, а результаты курсовых можно положить в портфолио. Специалисты центра карьеры помогут с резюме, сопроводительными письмами и собеседованиями.
В HTML и CSS часто возникает необходимость размещения двух или нескольких блоков div рядом друг с другом. Но при этом могут возникнуть некоторые проблемы, например, один блок может автоматически получить отступы при изменении его ширины в процентах, что приводит к его неидеальному выравниванию с соседним блоком. Также при увеличении масштаба страницы один блок может сместиться под другой, что приводит к нарушению жидкости отображения.
<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>
#left {
float: left;
width: 65%;
overflow: hidden;
}
#right {
overflow: hidden;
}
В приведенном выше примере, блок с идентификатором «left» имеет ширину 65% и свойство float: left;, что позволяет ему располагаться слева от других блоков. Однако при увеличении его ширины в процентах, этот блок автоматически получает отступы, из-за чего он не идеально выравнивается с блоком «right». Кроме того, при увеличении масштаба страницы блок «right» может сместиться под блок «left», что приводит к нарушению жидкости отображения.
Чтобы решить эти проблемы, можно использовать свойство display: flex; для родительского блока. Это свойство делает блок гибким контейнером, и его дочерние элементы автоматически становятся гибкими элементами.
#wrapper {
display: flex;
}
#left {
width: 65%;
}
#right {
width: 35%;
}
В этом примере, блоки «left» и «right» автоматически выравниваются по горизонтали, без каких-либо автоматических отступов, и они не смещаются друг под друга при увеличении масштаба страницы. Таким образом, можно добиться жидкого отображения двух блоков div, расположенных рядом друг с другом.
На курсе Skypro «Веб-разработчик» освоите JavaScript, GitHub, Tilda, Postman, HTML, CSS и другие программы и инструменты, научитесь решать реальные задачи разработчика и работать в команде. Все учебные проекты можно положить в портфолио и устроиться на работу по новой специальности еще в процессе обучения.
Добавить комментарий