Есть вёрстка на float. Посты будут добавляться. При нечётном количестве постов кнопка ORDER должна оставаться там где находится сейчас. При чётном кол-ве постов кнопка должна центрироваться снизу по центру по всей ширине.
Подскажите как решить такую задачу.
.all__post {
width: 750px;
}
.post__list {
width: 100%;
font-size: 0;
}
.post__item:nth-child(odd) {
margin-right: 26px;
}
.post__item {
width: 350px;
font-family: "Open Sans", serif;
list-style: none;
display: inline-block;
margin-bottom: 57px;
float: left;
cursor: pointer;
outline: none;
}
.post__item-img {
width: 100%;
height: 200px;
background-color: #89c39b;
}
.post__item-h {
font-size: 20px;
margin-top: 30px;
margin-bottom: 20px;
font-size: 24px;
color: #1a1a1a;
text-transform: uppercase;
text-align: center;
}
.post__item-span {
font-size: 14px;
color: #1a1a1a;
}
.button {
text-align: center;
height: 200px;
position: relative;
}
.button__link {
display: inline-block;
font-size: 30px;
text-transform: uppercase;
text-decoration: none;
width: 250px;
height: 70px;
background-color: #8c5d79;
color: #1a1a1a;
line-height: 70px;
text-align: center;
border-radius: 5px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -125px;
}
<div class="all__post">
<ul class="post__list clearfix">
<li tabindex="0" class="post__item">
<div class="post__item-img"></div>
<h2 class="post__item-h">Heading Heading HeadingHeading</h2>
<span class="post__item-span">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, magnam! Vel illo sint repellat
soluta, et animi ullam porro iusto quisquam pariatur laboriosam odio eligendi eum, vitae
ducimus error minima!Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, magnam!Lorem
ipsum dolor sit amet consectetur adipisicing elit. Magni, magnam!
</span>
</li>
<li tabindex="0" class="post__item">
<div class="post__item-img"></div>
<h2 class="post__item-h">Heading</h2>
<span class="post__item-span">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, magnam! Vel illo sint repellat soluta,
et animi ullam porro iusto quisquam pariatur laboriosam odio eligendi eum, vitae ducimus error
minima! Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, magnam! Vel illo sint
repellat soluta, et animi ullam porro iusto quisquam pariatur laboriosam odio eligendi eum, vitae
ducimus error minima! Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, magnam!
Vel illo sint repellat soluta, et animi ullam porro iusto quisquam pariatur laboriosam odio eligendi
eum, vitae ducimus error minima!
</span>
</li>
<li tabindex="0" class="post__item">
<div class="post__item-img post__item-img__active"></div>
<h2 class="post__item-h">Heading</h2>
<span class="post__item-span">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, magnam! Vel illo sint repellat soluta,
et animi ullam porro iusto quisquam pariatur laboriosam odio eligendi eum, vitae ducimus error
minima! Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, magnam! Vel illo sint
repellat soluta, et animi ullam porro iusto quisquam pariatur laboriosam odio eligendi eum, vitae
ducimus error minima! Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, magnam!
Vel illo sint repellat soluta, et animi ullam porro iusto quisquam pariatur laboriosam odio eligendi
eum, vitae ducimus error minima!
</span>
</li>
<li class="post__item">
<div class="button">
<a href="" class="button__link">Order</a>
</div>
</li>
</ul>