Как расположить элементы друг за другом?
есть такой сайт
<div class="navbar"> <div class="header_nav"> <div class="change_theme_button"> <img class="change_theme" src="icons/ICON-change_theme.svg" alt="change_theme"> </div> <div class="name_nav"> <p style="font-size: 20px; padding-bottom: 4px;" class="name">LearnFS</p> </div> </div> <div class="navigation"> <div class="main"> <img class="img_nav" src="icons/ICON-main_true.svg" alt="main_true"> <p class="p_nav">Главная</p> </div> <div class="article"> <img class="img_nav" src="icons/ICON-article_false.svg" alt="main_true"> <p class="p_nav">Статьи</p> </div> <div class="polls"> <img class="img_nav" src="icons/ICON-polls_false.svg" alt="main_true"> <p style="padding-bottom: 4px;" class="p_nav">Опросы</p> </div> <div class="question"> <img class="img_nav" src="icons/ICON-question_false.svg" alt="main_true"> <p style="padding-bottom: 4px;" class="p_nav">Вопросы</p> </div> </div> </div> <div class="content"> <div class="search_bar"> </div> </div> <div class="info"> </div> |
<div class="navbar"> <div class="header_nav"> <div class="change_theme_button"> <img class="change_theme" src="icons/ICON-change_theme.svg" alt="change_theme"> </div> <div class="name_nav"> <p style="font-size: 20px; padding-bottom: 4px;" class="name">LearnFS</p> </div> </div> <div class="navigation"> <div class="main"> <img class="img_nav" src="icons/ICON-main_true.svg" alt="main_true"> <p class="p_nav">Главная</p> </div> <div class="article"> <img class="img_nav" src="icons/ICON-article_false.svg" alt="main_true"> <p class="p_nav">Статьи</p> </div> <div class="polls"> <img class="img_nav" src="icons/ICON-polls_false.svg" alt="main_true"> <p style="padding-bottom: 4px;" class="p_nav">Опросы</p> </div> <div class="question"> <img class="img_nav" src="icons/ICON-question_false.svg" alt="main_true"> <p style="padding-bottom: 4px;" class="p_nav">Вопросы</p> </div> </div> </div> <div class="content"> <div class="search_bar"> </div> </div> <div class="info"> </div>
info это правый блок, content чёрный блок, navbar левый блок
.navbar { display: inline-block; position: absolute; height: 100%; width: 188px; border-radius: 0px 10px 10px 0px; border-right: 1px solid #E8E8EF; background: #FFF; font-family: 'Inter', sans-serif; } .info { display: inline-block; position: absolute; right: 0; top: 0; height: 100%; width: 326px; border-radius: 10px 0px 0px 10px; border-right: 1px solid #E8E8EF; background: #FFF; } .content { margin-left: auto; margin-right: auto; display: inline-block; background-color: #000; } |
.navbar { display: inline-block; position: absolute; height: 100%; width: 188px; border-radius: 0px 10px 10px 0px; border-right: 1px solid #E8E8EF; background: #FFF; font-family: 'Inter', sans-serif; } .info { display: inline-block; position: absolute; right: 0; top: 0; height: 100%; width: 326px; border-radius: 10px 0px 0px 10px; border-right: 1px solid #E8E8EF; background: #FFF; } .content { margin-left: auto; margin-right: auto; display: inline-block; background-color: #000; }
мне необходимо сделать так, что бы чёрный блок был между info и navbar. Я прочитал что для всех блоков надо поставить свойство inline-block, но мне это не помогло. Подскажите с помощью какого свойства это можно сделать?
Дополнительно:
Что за эпидемия инлайнов? :D Недавно один чел тоже пытался сделать колонки инлайнами, хоть и просто в качестве опыта "попробовать все что угодно". Где вы это вычитываете?)
https://yandex.ru/search/?text=three+columns+layout
<div class="wrapper"> <div class="navbar"> </div> <div class="content"> </div> <div class="info"> </div> </div> |
<div class="wrapper"> <div class="navbar"> </div> <div class="content"> </div> <div class="info"> </div> </div>
.wrapper { display: grid; grid-template-columns: 188px 1fr 326px; min-height: 100vh; } .navbar { /*display: inline-block; position: absolute; height: 100%; width: 188px;*/ border-radius: 0px 10px 10px 0px; border-right: 1px solid #E8E8EF; background: #FFF; font-family: 'Inter', sans-serif; } .info { /*display: inline-block; position: absolute; right: 0; top: 0; height: 100%; width: 326px;*/ border-radius: 10px 0px 0px 10px; border-right: 1px solid #E8E8EF; background: #FFF; } .content { /*margin-left: auto; margin-right: auto; display: inline-block; */ background-color: #000; } /* закомментированное удалить. */ |
.wrapper { display: grid; grid-template-columns: 188px 1fr 326px; min-height: 100vh; } .navbar { /*display: inline-block; position: absolute; height: 100%; width: 188px;*/ border-radius: 0px 10px 10px 0px; border-right: 1px solid #E8E8EF; background: #FFF; font-family: 'Inter', sans-serif; } .info { /*display: inline-block; position: absolute; right: 0; top: 0; height: 100%; width: 326px;*/ border-radius: 10px 0px 0px 10px; border-right: 1px solid #E8E8EF; background: #FFF; } .content { /*margin-left: auto; margin-right: auto; display: inline-block; */ background-color: #000; } /* закомментированное удалить. */
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для расположения элементов друг за другом в веб-разработке можно использовать различные методы и свойства CSS. Один из самых распространенных способов - использование свойства display с значением inline или inline-block.
Например, если у вас есть несколько элементов
<div class="container"> <div class="element">Element 1</div> <div class="element">Element 2</div> <div class="element">Element 3</div> </div> .container { display: flex; } .element { margin-right: 10px; }
В этом примере мы используем свойство display со значением flex для контейнера, чтобы элементы автоматически выстраивались в ряд. С помощью свойства margin-right мы добавляем отступ между элементами.
Если вам нужно расположить элементы вертикально друг за другом, вы также можете использовать свойство display с значением flex и направление flex-direction: column:
<div class="container"> <div class="element">Element 1</div> <div class="element">Element 2</div> <div class="element">Element 3</div> </div> .container { display: flex; flex-direction: column; } .element { margin-bottom: 10px; }
Таким образом, вы можете легко управлять расположением элементов на странице, используя свойства CSS и значения display.