Как перенести блок справа вниз под другой блок?

CSS Flexbox HTML

26 марта 2026 1 ответ

html код

&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;     &lt;title&gt;Объявления&lt;/title&gt;     &lt;link href="styles/stylemain.css" rel="stylesheet"&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="post-wrap"&gt; &lt;div class="post-item"&gt; &lt;div class="item-content"&gt; &lt;div class="item-icon car"&gt;&lt;/div&gt; &lt;div class="item-body"&gt; &lt;h3&gt;Lada Iskra&lt;/h3&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat a quam non blandit.&lt;/p&gt; &lt;/div&gt; &lt;div class="item-footer"&gt; &lt;a href="#" class="link"&gt;&lt;span&gt;Купить&lt;/span&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;  &lt;div class="post-item"&gt; &lt;div class="item-content"&gt; &lt;div class="item-icon car"&gt;&lt;/div&gt; &lt;div class="item-body"&gt; &lt;h3&gt;Chevrolet Niva 2&lt;/h3&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat a quam non blandit.&lt;/p&gt; &lt;/div&gt; &lt;div class="item-footer"&gt; &lt;a href="#" class="link"&gt;&lt;span&gt;Купить&lt;/span&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;  &lt;div class="post-item"&gt; &lt;div class="item-content"&gt; &lt;div class="item-icon car"&gt;&lt;/div&gt; &lt;div class="item-body"&gt; &lt;h3&gt;Lada 4×4 II&lt;/h3&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat a quam non blandit.&lt;/p&gt; &lt;/div&gt; &lt;div class="item-footer"&gt; &lt;a href="#" class="link"&gt;&lt;span&gt;Купить&lt;/span&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;  &lt;div class="post-item"&gt; &lt;div class="item-content"&gt; &lt;div class="item-icon car"&gt;&lt;/div&gt; &lt;div class="item-body"&gt; &lt;h3&gt;Lada X-Cross 5&lt;/h3&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat a quam non blandit.&lt;/p&gt; &lt;/div&gt; &lt;div class="item-footer"&gt; &lt;a href="#" class="link"&gt;&lt;span&gt;Купить&lt;/span&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;div class="post-item"&gt; &lt;div class="item-content"&gt; &lt;div class="item-icon car"&gt;&lt;/div&gt; &lt;div class="item-body"&gt; &lt;h3&gt;Москвич 3&lt;/h3&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat a quam non blandit.&lt;/p&gt; &lt;/div&gt; &lt;div class="item-footer"&gt; &lt;a href="#" class="link"&gt;&lt;span&gt;Купить&lt;/span&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;  &lt;div class="post-item"&gt; &lt;div class="item-content"&gt; &lt;div class="item-icon car"&gt;&lt;/div&gt; &lt;div class="item-body"&gt; &lt;h3&gt;Москвич 6&lt;/h3&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat a quam non blandit.&lt;/p&gt; &lt;/div&gt; &lt;div class="item-footer"&gt; &lt;a href="#" class="link"&gt;&lt;span&gt;Купить&lt;/span&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="post-item"&gt; &lt;div class="item-content"&gt; &lt;div class="item-icon car"&gt;&lt;/div&gt; &lt;div class="item-body"&gt; &lt;h3&gt;Lada Vesta NG&lt;/h3&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat a quam non blandit.&lt;/p&gt; &lt;/div&gt; &lt;div class="item-footer"&gt; &lt;a href="#" class="link"&gt;&lt;span&gt;Купить&lt;/span&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;  &lt;div class="post-item"&gt; &lt;div class="item-content"&gt; &lt;div class="item-icon car"&gt;&lt;/div&gt; &lt;div class="item-body"&gt; &lt;h3&gt;Evolute i-Joy&lt;/h3&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat a quam non blandit.&lt;/p&gt; &lt;/div&gt; &lt;div class="item-footer"&gt; &lt;a href="#" class="link"&gt;&lt;span&gt;Купить&lt;/span&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;  &lt;div class="post-item"&gt; &lt;div class="item-content"&gt; &lt;div class="item-icon car"&gt;&lt;/div&gt; &lt;div class="item-body"&gt; &lt;h3&gt;Evolute i-Pro&lt;/h3&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat a quam non blandit.&lt;/p&gt; &lt;/div&gt; &lt;div class="item-footer"&gt; &lt;a href="#" class="link"&gt;&lt;span&gt;Купить&lt;/span&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;  &lt;div class="post-item"&gt; &lt;div class="item-content"&gt; &lt;div class="item-icon car"&gt;&lt;/div&gt; &lt;div class="item-body"&gt; &lt;h3&gt;Aurus Komendant&lt;/h3&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat a quam non blandit.&lt;/p&gt; &lt;/div&gt; &lt;div class="item-footer"&gt; &lt;a href="#" class="link"&gt;&lt;span&gt;Купить&lt;/span&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;  &lt;div class="post-item"&gt; &lt;div class="item-content"&gt; &lt;div class="item-icon car"&gt;&lt;/div&gt; &lt;div class="item-body"&gt; &lt;h3&gt;Aurus Senat S600&lt;/h3&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat a quam non blandit.&lt;/p&gt; &lt;/div&gt; &lt;div class="item-footer"&gt; &lt;a href="#" class="link"&gt;&lt;span&gt;Купить&lt;/span&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;  &lt;div class="post-item"&gt; &lt;div class="item-content"&gt; &lt;div class="item-icon car"&gt;&lt;/div&gt; &lt;div class="item-body"&gt; &lt;h3&gt;Проект Русский Прадо&lt;/h3&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat a quam non blandit.&lt;/p&gt; &lt;/div&gt; &lt;div class="item-footer"&gt; &lt;a href="#" class="link"&gt;&lt;span&gt;Купить&lt;/span&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Объявления</title> <link href="styles/stylemain.css" rel="stylesheet"> </head> <body> <div class="post-wrap"> <div class="post-item"> <div class="item-content"> <div class="item-icon car"></div> <div class="item-body"> <h3>Lada Iskra</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat a quam non blandit.</p> </div> <div class="item-footer"> <a href="#" class="link"><span>Купить</span></a> </div> </div> </div> <div class="post-item"> <div class="item-content"> <div class="item-icon car"></div> <div class="item-body"> <h3>Chevrolet Niva 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat a quam non blandit.</p> </div> <div class="item-footer"> <a href="#" class="link"><span>Купить</span></a> </div> </div> </div> <div class="post-item"> <div class="item-content"> <div class="item-icon car"></div> <div class="item-body"> <h3>Lada 4×4 II</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat a quam non blandit.</p> </div> <div class="item-footer"> <a href="#" class="link"><span>Купить</span></a> </div> </div> </div> <div class="post-item"> <div class="item-content"> <div class="item-icon car"></div> <div class="item-body"> <h3>Lada X-Cross 5</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat a quam non blandit.</p> </div> <div class="item-footer"> <a href="#" class="link"><span>Купить</span></a> </div> </div> </div> <br><br><br> <div class="post-item"> <div class="item-content"> <div class="item-icon car"></div> <div class="item-body"> <h3>Москвич 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat a quam non blandit.</p> </div> <div class="item-footer"> <a href="#" class="link"><span>Купить</span></a> </div> </div> </div> <div class="post-item"> <div class="item-content"> <div class="item-icon car"></div> <div class="item-body"> <h3>Москвич 6</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat a quam non blandit.</p> </div> <div class="item-footer"> <a href="#" class="link"><span>Купить</span></a> </div> </div> </div> <div class="post-item"> <div class="item-content"> <div class="item-icon car"></div> <div class="item-body"> <h3>Lada Vesta NG</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat a quam non blandit.</p> </div> <div class="item-footer"> <a href="#" class="link"><span>Купить</span></a> </div> </div> </div> <div class="post-item"> <div class="item-content"> <div class="item-icon car"></div> <div class="item-body"> <h3>Evolute i-Joy</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat a quam non blandit.</p> </div> <div class="item-footer"> <a href="#" class="link"><span>Купить</span></a> </div> </div> </div> <div class="post-item"> <div class="item-content"> <div class="item-icon car"></div> <div class="item-body"> <h3>Evolute i-Pro</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat a quam non blandit.</p> </div> <div class="item-footer"> <a href="#" class="link"><span>Купить</span></a> </div> </div> </div> <div class="post-item"> <div class="item-content"> <div class="item-icon car"></div> <div class="item-body"> <h3>Aurus Komendant</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat a quam non blandit.</p> </div> <div class="item-footer"> <a href="#" class="link"><span>Купить</span></a> </div> </div> </div> <div class="post-item"> <div class="item-content"> <div class="item-icon car"></div> <div class="item-body"> <h3>Aurus Senat S600</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat a quam non blandit.</p> </div> <div class="item-footer"> <a href="#" class="link"><span>Купить</span></a> </div> </div> </div> <div class="post-item"> <div class="item-content"> <div class="item-icon car"></div> <div class="item-body"> <h3>Проект Русский Прадо</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat a quam non blandit.</p> </div> <div class="item-footer"> <a href="#" class="link"><span>Купить</span></a> </div> </div> </div> </div> </body> </html>

код стилей css

@import "../font-awesome/css/all.css"; @import "../font-awesome/css/fontawesome.min.css";  * {     margin: 0;     box-sizing: border-box;  }  body {     background: #39383F;     font-family: 'Montserrat Alternates', sans-serif;  }  .post-wrap {    max-width: 1120px;     margin: 0 0;     display: flex;      }  .post-item {     padding: 15px;     cursor: pointer;  }  .post-item * {     transition: .3s linear;  }  .item-content {     background: #413D4C;     padding: 40px;  }  .item-icon {     margin-bottom: 20px;     font-family: FontAwesome;  }  .item-icon:before {     content: "";     font-family: FontAwesome;     color: #F09EA3;     font-size: 50px;     line-height: 1;  }  .item-icon.photo:before {     content: "f030";  }  .item-icon.car:before {    content: "f1b9"; }  .item-icon.video:before {     content: "f03d";  }  .item-icon.gift:before {     content: "f06b";  }  .item-icon.group:before {     content: "f0c0";  }  .item-icon.tree:before {     content: "f1bb";  }  .item-icon.anchor:before {     content: "f13d";  }  .post-item:hover .item-icon, .post-item:hover .item-body h3, .post-item:hover .item-body p {     transform: translateY(-8px);  }  .item-body {     color: #F5E2CD;     font-size: 14px;  }  .item-body h3 {     font-weight: 500;     margin-bottom: 15px;     transition-delay: .05s;  }  .item-body p {     transition-delay: .1s;  }  .item-footer {     padding-top: 15px;  }  .link {     text-decoration: none;     display: inline-block;     overflow: hidden;     position: relative;     padding-right: 30px;     font-size: 12px;     text-transform: uppercase;     font-weight: 600;     color: #F5E2CD;  }  .link:before {     content: "";     position: absolute;     top: 0;     left: 0;     width: 100%;     bottom: 0;     height: .125rem;     margin: auto;     background: #F09EA3;     transform: scaleX(.2);     transform-origin: left center;     z-index: 0;     transition: .6s cubic-bezier(.6, .01, 0, 1);  }  .link span {     display: inline-block;     position: relative;     transform: translateX(-200%);     transition: .6s cubic-bezier(.6, .01, 0, 1);  }  .post-item:hover .link span {     transform: translateX(0%);  }  .post-item:hover .link:before {     transform-origin: right center;  }  @media (min-width: 768px) {     .post-item {        flex-basis: 1000%;        flex-shrink: 0;     }  }  @media (min-width: 960px) {     .post-item {        flex-basis: 33%;     }  }

@import "../font-awesome/css/all.css"; @import "../font-awesome/css/fontawesome.min.css"; * { margin: 0; box-sizing: border-box; } body { background: #39383F; font-family: 'Montserrat Alternates', sans-serif; } .post-wrap { max-width: 1120px; margin: 0 0; display: flex; } .post-item { padding: 15px; cursor: pointer; } .post-item * { transition: .3s linear; } .item-content { background: #413D4C; padding: 40px; } .item-icon { margin-bottom: 20px; font-family: FontAwesome; } .item-icon:before { content: ""; font-family: FontAwesome; color: #F09EA3; font-size: 50px; line-height: 1; } .item-icon.photo:before { content: "f030"; } .item-icon.car:before { content: "f1b9"; } .item-icon.video:before { content: "f03d"; } .item-icon.gift:before { content: "f06b"; } .item-icon.group:before { content: "f0c0"; } .item-icon.tree:before { content: "f1bb"; } .item-icon.anchor:before { content: "f13d"; } .post-item:hover .item-icon, .post-item:hover .item-body h3, .post-item:hover .item-body p { transform: translateY(-8px); } .item-body { color: #F5E2CD; font-size: 14px; } .item-body h3 { font-weight: 500; margin-bottom: 15px; transition-delay: .05s; } .item-body p { transition-delay: .1s; } .item-footer { padding-top: 15px; } .link { text-decoration: none; display: inline-block; overflow: hidden; position: relative; padding-right: 30px; font-size: 12px; text-transform: uppercase; font-weight: 600; color: #F5E2CD; } .link:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; bottom: 0; height: .125rem; margin: auto; background: #F09EA3; transform: scaleX(.2); transform-origin: left center; z-index: 0; transition: .6s cubic-bezier(.6, .01, 0, 1); } .link span { display: inline-block; position: relative; transform: translateX(-200%); transition: .6s cubic-bezier(.6, .01, 0, 1); } .post-item:hover .link span { transform: translateX(0%); } .post-item:hover .link:before { transform-origin: right center; } @media (min-width: 768px) { .post-item { flex-basis: 1000%; flex-shrink: 0; } } @media (min-width: 960px) { .post-item { flex-basis: 33%; } }

Дополнительно:

flex-wrap: wrap;

спасибо, помогло, но возникла ещё одна проблема которую я не подписал в вопросе. Когда ставлю flex-wrap: wrap; то выводятся 12 блоков по 3 в ряд, а нужно чтобы было 5 блоков в одном ряду и т.д. Заранее спасибо.
Venslyy,
display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px;
display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px;
Сергей delphinpro,

всё съехало, наверное я не туда вставил код который вы привели выше, ибо display: flex; конфликтует с display: grid; вставлял я ваш код в .post-wrap
Venslyy, snippet
Сергей delphinpro, спасибо большое, проблема решена

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Роман IT Ответ

10 апреля 2026 в 16:05

Для того чтобы перенести блок справа вниз под другой блок, можно воспользоваться CSS свойством float.

Прежде всего, у вас должно быть два блока, которые вы хотите разместить - один сверху, а другой справа от него.

Пример HTML-кода:

<div class="main-block">
    <div class="block-left">
        <!-- содержимое блока слева -->
    </div>
    <div class="block-right">
        <!-- содержимое блока справа -->
    </div>
</div>

Теперь добавим CSS стили для блоков:

.block-left {
    float: left;
    width: 50%; /* ширина блока слева */
}
 
.block-right {
    float: right;
    width: 50%; /* ширина блока справа */
}

.block-left { float: left; width: 50%; /* ширина блока слева */ } .block-right { float: right; width: 50%; /* ширина блока справа */ }

В данном примере мы используем свойство float для блока слева (block-left) и блока справа (block-right). Блок слева будет выровнен слева, а блок справа - справа. Ширина каждого блока установлена на 50%, чтобы они занимали равное количество места на странице.

Теперь блок справа будет находиться под блоком слева. При необходимости можно менять ширину блоков или их порядок, чтобы добиться нужного расположения элементов на странице.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов code-review Нужен ли код-ревью React/TypeScript проекта? 0 ответов

Как перенести блок справа вниз под другой блок?

Дополнительно:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно