Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

Как заполнить пустое место на сайте другим блоком css html

venslyy Знаток (311), на голосовании 8 месяцев назад
нужно пустое место справа заполнить блоками снизу. могу оставить только код 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;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
}
.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%;
}
}
Дополнен 9 месяцев назад
часть кода html
<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>

<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>
Дополнен 9 месяцев назад
2 часть кода html
<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>
Дополнен 9 месяцев назад
3 часть(последняя) кода html

<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>
Голосование за лучший ответ
frontDev Мастер (1576) 9 месяцев назад
Во первых, надо лечиться от диватоза, во вторых, как ты хочешь заполнить "пустое место справа" если у тебя ограничена ширина 1120 px у post-wrap? Он и не даёт контенту идти дальше, а переносит его вниз.
venslyyЗнаток (311) 9 месяцев назад
поменял .post-wrap на
  .post-wrap { 

margin: 0 0;

}
но ничего не изменилось. Как решить?
frontDev Мастер (1576) venslyy, Там html код надо править
Похожие вопросы