Какие стили нужно задать, что бы получилась равнозначная сетка из блоков?

236

13 мая 2018, 14:00

Есть перечень услуг, которые идут ровно по горизонтали, но беспорядочно по вертикали. Как правильно оформить, чтобы вертикаль тоже была симметрична? что-то на примере такого:

.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>

Answer 1

Используйте 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

Answer 2

Если я правильно понял условие и вам нужно, чтобы 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/ Если я что-то не так понял - пишите в комментарии, помогу

Создание сайта для дропшиппинга в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как сделать hover effect с иконкой поверх картинки?

Мне необходимо с помощью css и его :hover наложить градиент и icon поверх картинкиВыглядеть это должно примерно вот так, у меня же получается это...

293

HTML

Как словить событие закрытие и открытие крышки ноутбука в JavaScript?

Мне нужно реализовать автообновление страницы после выхода ПК из сна, а также после разблокировки экранаУже целый день сижу над этим таском...

202

jQuery

Импорт данных в готовую формулу

Есть готовая формула, в которую нужно подставлять значения из списка вместо "LOGO"Может есть другая программа, в которой это делается?

231

jQuery

Плавное появление контента в новом окне. Запрет на панель управления видео

Всем доброго времени сутокЕсть код

204