Есть перечень услуг, которые идут ровно по горизонтали, но беспорядочно по вертикали. Как правильно оформить, чтобы вертикаль тоже была симметрична? что-то на примере такого:
.ofera {
position: relative;
z-index: 1;
display: inline-block;
overflow: hidden;
margin: 2em 2.135em 0 0;
}
.list-of {
overflow: hidden;
margin: 0;
padding: 0;
width: 80%;
list-style: none;
}
<div class="list-of">
<div class="ofera">
<a href="#">
<h2>randaooooda</h2>
</a>
<p>sdfff<br>sdfsddd<br>sdffasd<br>asdddd</p>
</div>
<div class="ofera">
<a href="#">
<h2>asdd</h2>
</a>
<p>sdfff<br>sdfsddd<br>sdffasd<br>asdddd</p>
</div>
<div class="ofera">
<a href="#">
<h2>asddda</h2>
</a>
<p>sdfff<br>sdfsddd<br>sdffasd<br>asdddd</p>
</div>
<div class="ofera">
<a href="#">
<h2>asssd</h2>
</a>
<p>sdfff<br>sdfsddd<br>sdffasd<br>asdddd</p>
</div>
<div class="ofera">
<a href="#">
<h2>asdddds</h2>
</a>
<p>sdfff<br>sdfsddd<br>sdffasd<br>asdddd</p>
</div>
<div class="ofera">
<a href="#">
<h2>raacfasdf</h2>
</a>
<p>sdfff<br>sdfsddd<br>sdffasd<br>asdddd</p>
</div>
<div class="ofera">
<a href="#">
<h2>rand</h2>
</a>
<p>sdfff<br>sdfsddd<br>sdffasd<br>asdddd</p>
</div>
</div>
Используйте flex
:
.ofera {
position: relative;
width: 25%;
}
.list-of {
display: flex;
flex-wrap: wrap;
}
<div class="list-of">
<div class="ofera">
<a href="#">
<h2>randaooooda</h2>
</a>
<p>sdfff<br>sdfsddd<br>sdffasd<br>asdddd</p>
</div>
<div class="ofera">
<a href="#">
<h2>asdd</h2>
</a>
<p>sdfff<br>sdfsddd<br>sdffasd<br>asdddd</p>
</div>
<div class="ofera">
<a href="#">
<h2>asddda</h2>
</a>
<p>sdfff<br>sdfsddd<br>sdffasd<br>asdddd</p>
</div>
<div class="ofera">
<a href="#">
<h2>asssd</h2>
</a>
<p>sdfff<br>sdfsddd<br>sdffasd<br>asdddd</p>
</div>
<div class="ofera">
<a href="#">
<h2>asdddds</h2>
</a>
<p>sdfff<br>sdfsddd<br>sdffasd<br>asdddd</p>
</div>
<div class="ofera">
<a href="#">
<h2>raacfasdf</h2>
</a>
<p>sdfff<br>sdfsddd<br>sdffasd<br>asdddd</p>
</div>
<div class="ofera">
<a href="#">
<h2>rand</h2>
</a>
<p>sdfff<br>sdfsddd<br>sdffasd<br>asdddd</p>
</div>
</div>
Пример на JSFiddle
Если я правильно понял условие и вам нужно, чтобы 4 элемента шло в ряд, то вот решение:
<div class="list-of">
<div class="ofera">
<a href="#">
<h2>randaooooda</h2>
</a>
<p>sdfff<br>sdfsddd<br>sdffasd<br>asdddd</p>
</div>
<div class="ofera">
<a href="#">
<h2>asdd</h2>
</a>
<p>sdfff<br>sdfsddd<br>sdffasd<br>asdddd</p>
</div>
<div class="ofera">
<a href="#">
<h2>asddda</h2>
</a>
<p>sdfff<br>sdfsddd<br>sdffasd<br>asdddd</p>
</div>
<div class="ofera">
<a href="#">
<h2>asssd</h2>
</a>
<p>sdfff<br>sdfsddd<br>sdffasd<br>asdddd</p>
</div>
<div class="ofera">
<a href="#">
<h2>asdddds</h2>
</a>
<p>sdfff<br>sdfsddd<br>sdffasd<br>asdddd</p>
</div>
<div class="ofera">
<a href="#">
<h2>raacfasdf</h2>
</a>
<p>sdfff<br>sdfsddd<br>sdffasd<br>asdddd</p>
</div>
<div class="ofera">
<a href="#">
<h2>rand</h2>
</a>
<p>sdfff<br>sdfsddd<br>sdffasd<br>asdddd</p>
</div>
</div>
css
.list-of {
font-size: 0;
}
.list-of > * {
font-size: 14px;
}
.list-of .ofera {
display: inline-block;
vertical-align: top;
width: 25%;
}
Демо: https://jsfiddle.net/KirillSavko/8b64L69m/ Если я что-то не так понял - пишите в комментарии, помогу
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Мне необходимо с помощью css и его :hover наложить градиент и icon поверх картинкиВыглядеть это должно примерно вот так, у меня же получается это...
Мне нужно реализовать автообновление страницы после выхода ПК из сна, а также после разблокировки экранаУже целый день сижу над этим таском...
Есть готовая формула, в которую нужно подставлять значения из списка вместо "LOGO"Может есть другая программа, в которой это делается?
Всем доброго времени сутокЕсть код