Как разместить блоки div (см. фото)?
Мне нужно реализовать такой блок div на сайте (см. фото), но не совсем понимаю как это можно сделать именно чтобы число и описание находились на одной строчке, и Описание и текст под ним были в одной вертикали, но при этом чтобы данный блок был адаптивным под разные экраны. Как это можно реализовать? если выполнять мой код, то блок div с классом number и с классом subheading находятся друг над другом, но не рядом.
<div class="heading">/заголовок</div> <div class="about"> <div class="column flex-column"> <div class="number">01</div> <div class="subheading">Первое описание</div> <div class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. </div> <div class="column flex-column"> <div class="number">02</div> <div class="subheading">Второе описание</div> <div class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. </div> <div class="column flex-column"> <div class="number">03</div> <div class="subheading">Третье описание</div> <div class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. </div> <div class="column flex-column"> <div class="number">04</div> <div class="subheading">Четвертое описание</div> <div class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. </div> <div class="column flex-column"> <div class="number">05</div> <div class="subheading">Пятое описание</div> <div class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. </div> <div class="column flex-column"> <div class="number">06</div> <div class="subheading">Шестое описание</div> <div class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. </div> </div> |
<div class="heading">/заголовок</div> <div class="about"> <div class="column flex-column"> <div class="number">01</div> <div class="subheading">Первое описание</div> <div class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. </div> <div class="column flex-column"> <div class="number">02</div> <div class="subheading">Второе описание</div> <div class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. </div> <div class="column flex-column"> <div class="number">03</div> <div class="subheading">Третье описание</div> <div class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. </div> <div class="column flex-column"> <div class="number">04</div> <div class="subheading">Четвертое описание</div> <div class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. </div> <div class="column flex-column"> <div class="number">05</div> <div class="subheading">Пятое описание</div> <div class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. </div> <div class="column flex-column"> <div class="number">06</div> <div class="subheading">Шестое описание</div> <div class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. </div> </div>
.heading { font-size: 28px; font-weight: bold; margin-left: calc(7% - 10px); } .about { width: 85%; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; } .number { display: inline-block; vertical-align: top; font-size: 14px; font-weight: bold; } .subheading { display: inline-block; vertical-align: top; font-size: 28px; font-weight: bold; } .description { font-size: 16px; line-height: 1.5; margin-bottom: 10px; } .column { padding: 5px; border-radius: 5px; } .flex-column { display: flex; flex-direction: column; } |
.heading { font-size: 28px; font-weight: bold; margin-left: calc(7% - 10px); } .about { width: 85%; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; } .number { display: inline-block; vertical-align: top; font-size: 14px; font-weight: bold; } .subheading { display: inline-block; vertical-align: top; font-size: 28px; font-weight: bold; } .description { font-size: 16px; line-height: 1.5; margin-bottom: 10px; } .column { padding: 5px; border-radius: 5px; } .flex-column { display: flex; flex-direction: column; }
Дополнительно:
Полный ппц.
Ответы:
примерные добавки:
.column { position: relative; } .number { position: absolute; right: calc(100% + 5px); top: 0; } |
.column { position: relative; } .number { position: absolute; right: calc(100% + 5px); top: 0; }
да и .flex-column для приведённого примера не особо нужен
snippet
Вот один из многих вариантов решения. Немного переписал под флекс, но если хочешь для контейнера оставить грид принцип тот же. и да, ты забыл проставить закрывающие теги для каждого дочернего элемента, поэтому работало через одно место. И цифру можно допозиционировать согласно твоих нужд.
<style>.heading { font-size: 28px; font-weight: bold; margin-left: calc(7% - 10px); display: inline-block; width: auto; } .about { width: 100%; margin: 0; display: block; text-align: center; } .number { display: inline-block; vertical-align: top; font-size: 14px; margin: 5px; font-weight: bold; } .subheading { display: block; vertical-align: top; width: 100%; } .column-title { display: inline-block; vertical-align: top; font-weight: bold; margin: 5px; line-height: 1; font-size: 28px; } .description { font-size: 16px; line-height: 1.5; margin-bottom: 10px; } .column { padding: 5px; width: 28%; margin: 10px; text-align: left; border-radius: 5px; display: inline-block; }</style> <div class="heading">/заголовок</div> <div class="about"> <div class="column"> <div class="subheading"> <span class="number">01</span> <span class="column-title">Первое описание</span></div> <div class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. </div></div> <div class="column"> <div class="subheading"> <span class="number">02</span> <span class="column-title">Второе описание</span></div> <div class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. </div></div> <div class="column"> <div class="subheading"> <span class="number">03</span> <span class="column-title">Третье описание</span></div> <div class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. </div></div> <div class="column"> <div class="subheading"> <span class="number">04</span> <span class="column-title">Четвертое описание</span></div> <div class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. </div></div> <div class="column"> <div class="subheading"> <span class="number">05</span> <span class="column-title">Пятое описание</span></div> <div class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. </div></div> <div class="column"> <div class="subheading"> <span class="number">06</span> <span class="column-title">Шестое описание</span></div> <div class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. </div></div></div> |
<style>.heading { font-size: 28px; font-weight: bold; margin-left: calc(7% - 10px); display: inline-block; width: auto; } .about { width: 100%; margin: 0; display: block; text-align: center; } .number { display: inline-block; vertical-align: top; font-size: 14px; margin: 5px; font-weight: bold; } .subheading { display: block; vertical-align: top; width: 100%; } .column-title { display: inline-block; vertical-align: top; font-weight: bold; margin: 5px; line-height: 1; font-size: 28px; } .description { font-size: 16px; line-height: 1.5; margin-bottom: 10px; } .column { padding: 5px; width: 28%; margin: 10px; text-align: left; border-radius: 5px; display: inline-block; }</style> <div class="heading">/заголовок</div> <div class="about"> <div class="column"> <div class="subheading"> <span class="number">01</span> <span class="column-title">Первое описание</span></div> <div class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. </div></div> <div class="column"> <div class="subheading"> <span class="number">02</span> <span class="column-title">Второе описание</span></div> <div class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. </div></div> <div class="column"> <div class="subheading"> <span class="number">03</span> <span class="column-title">Третье описание</span></div> <div class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. </div></div> <div class="column"> <div class="subheading"> <span class="number">04</span> <span class="column-title">Четвертое описание</span></div> <div class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. </div></div> <div class="column"> <div class="subheading"> <span class="number">05</span> <span class="column-title">Пятое описание</span></div> <div class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. </div></div> <div class="column"> <div class="subheading"> <span class="number">06</span> <span class="column-title">Шестое описание</span></div> <div class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent malesuada tortor vitae tellus placerat volutpat. Pellentesque ut odio sit amet lectus consequat tristique sed sed ante. Fusce lacinia lectus egestas, mollis turpis vitae, venenatis ipsum. Mauris dapibus iaculis tincidunt. </div></div></div>
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для размещения блоков div на странице вам потребуется использовать CSS. Вот пример того, как можно создать и стилизовать блоки div на HTML странице:
```html
.container {
display: flex;
justify-content: space-around;
}
.block {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
text-align: center;
line-height: 100px;
}
```
В данном примере мы создали контейнер div с классом "container", который использует flexbox для выравнивания блоков div с классом "block" внутри него. Каждый блок div имеет заданные размеры, цвет фона и отступы.
Если вам нужно разместить блоки div в другой конфигурации или стилизовать их иначе, вы можете изменить CSS свойства в соответствии с вашими потребностями. Например, вы можете использовать grid layout или другие свойства CSS для управления расположением и внешним видом блоков div на вашей странице.