1

Хотелось бы увидеть толковый ответ на вопрос о позиционировании текста в пустом блоке как на картинке ниже. введите сюда описание изображения

Задачу я собственно решил списком, поместив внутрь каждого элемента ссылку с текстом. Нужные размеры для блока задавались путём полей для ссылки. Обращаю Ваше внимание на то, что блоки должны быть кликабельные по всей ширине/высоте.

Собственно смущает задание размеров с помощью полей. Свой код приведу ниже.

.genres_stations {
  display: flex;
  height: 383px;
  width: 940px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
  list-style: none;
}

.genre {
  width: 220px;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  text-align: center;
  font-size: 18px;
}

.genre a {
  display: inline-block;
  width: inherit;
  padding: 138px 0 18px;
  color: #2a333c;
}
<ul class="genres_stations">
  <li class="genre">
    <a href="#">Trending Top</a>
  </li>
  <li class="genre">
    <a href="#">Rock</a>
  </li>
  <li class="genre">
    <a href="#">R n B</a>
  </li>
  <li class="genre">
    <a href="#">Alternative</a>
  </li>
  <li class="genre">
    <a href="#">Country</a>
  </li>
  <li class="genre">
    <a href="#">Pop</a>
  </li>
  <li class="genre">
    <a href="#">Jazz</a>
  </li>
  <li class="genre">
    <a href="#">Reggae</a>
  </li>
</ul>

2 ответа 2

3

Я бы так реализовал. Не думаю что нужны какие то комментарии

.genres_stations {
  display: flex;
  height: 383px;
  width: 940px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
  list-style: none;
}

.genre {
  width: 220px;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  text-align: center;
  font-size: 18px;
}

.genre a {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: red;
  background: green;
}
<ul class="genres_stations">
  <li class="genre">
    <a href="#">
      <img src="" title="foto" />
      <span>Trending Top</span>
    </a>
  </li>
</ul>

10
  • Хм... Задумался над тем, чтобы перенести картинки в разметку. Вроде так даже лучше будет 21 апр 2018 в 7:18
  • Только мне непонятно почему в стилях для ссылки сначала ширина 100%, а потом наследование ширины родителя. 21 апр 2018 в 7:32
  • Я просто забыл убрать. )))
    – Air
    21 апр 2018 в 7:35
  • Ну и конечно пример то хороший, но сути вопроса он не меняет. Поля так и остались, а объяснения никакого. 21 апр 2018 в 7:37
  • Ты же просил как на картинке... Я тебе показал логику... А дальше сам... И что не понятно... ??
    – Air
    21 апр 2018 в 7:40
2

Я вот так это сделал, вроде бы адаптивно

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  font-family: Helvetica;
}

.item {
  width: 25%;
  height: 25%;
  outline: 10px solid #fff;
  background: #fbfbfb;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 6px;
}

p,
i.fa {
  font-size: 3em;
  font-variant: small-caps;
  font-weight: 800;
  color: #999;
}

.items {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: 30px auto;
}

@media (max-width:768px) {
  .items {
    justify-content: center;
  }
  .item {
    width: 30%;
    padding: 40px 6px;
    margin: 6px;
  }
  p,
  i.fa {
    font-size: 2em;
    font-variant: small-caps;
    font-weight: 600;
  }
}

@media (max-width:600px) {
  .items {
    justify-content: center;
  }
  .item {
    width: 40%;
    padding: 30px 6px;
    outline: 8px solid #fff;
  }
  p,
  i.fa {
    font-size: 2em;
    font-variant: small-caps;
    font-weight: 400;
  }
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


<div class="items">
  <div class="item">
    <i class="fa fa-line-chart"></i>
    <p>lorem</p>
  </div>
  <div class="item">
    <i class="fa fa-microchip"></i>
    <p>lorem</p>
  </div>
  <div class="item">
    <i class="fa fa-audio-description"></i>
    <p>lorem</p>
  </div>
  <div class="item">
    <i class="fa fa-cloud-download"></i>
    <p>lorem</p>
  </div>
  <div class="item">
    <i class="fa fa-commenting"></i>
    <p>lorem</p>
  </div>
  <div class="item">
    <i class="fa fa-exchange"></i>
    <p>lorem</p>
  </div>
  <div class="item">
    <i class="fa fa-handshake-o"></i>
    <p>lorem</p>
  </div>
  <div class="item">
    <i class="fa fa-picture-o"></i>
    <p>lorem</p>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.