Не получается сверстать элемент

164

02 июля 2018, 12:50

Должно получится как на скрине

HTML:

<div class="row">
  <div class="col-md-1">
  <img src="http://euroingridients.monotone.by/wp-content/uploads/2018/06/location.png"  >
    <span>4-й переулок Кольцова д.51, офис 501
  </div>
  <div class="col-md-2">
    <img src="http://euroingridients.monotone.by/wp-content/uploads/2018/06/phone.png">
    +32332234234
  +34234234234</div>
  <div class="col-md-3">
    <img src="http://euroingridients.monotone.by/wp-content/uploads/2018/06/phone.png">
    iwenik@gmail.com</div>
  <div class="col-md-4"><img src="http://euroingridients.monotone.by/wp-content/uploads/2018/06/phone.png"></div>
  <div class="col-md-5"><img src="http://euroingridients.monotone.by/wp-content/uploads/2018/06/phone.png"></div>
  <div class="col-md-6"><img src="http://euroingridients.monotone.by/wp-content/uploads/2018/06/phone.png"></div>
  <div class="col-md-7"><img src="http://euroingridients.monotone.by/wp-content/uploads/2018/06/phone.png"></div>
</div>

CSS:

div .row {
  display: inline-block;
}
div .col-md-1 {
  width:100%;
  float: left;
}
div .col-md-2 {
  width:100%;
  display: inline;
}
div .col-md-3 {
  width:100%;
}

Answer 1

* { 
  margin: 0; 
  padding: 0; 
} 
 
.items { 
  display: flex; 
  justify-content: space-around; 
  border: 1px solid blue; 
} 
 
.item { 
  display: flex; 
  align-items: center; 
} 
 
.item .fa { 
  font-size: 2.6em; 
} 
 
.item div { 
  padding: 6px; 
} 
 
.item:last-child .fa { 
  margin: 0 4px; 
  font-size: 2em; 
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
<div class="items"> 
 
  <div class="item"> 
    <div> 
      <i class="fa fa-map-marker" aria-hidden="true"></i> 
    </div> 
    <div> 
      <p>4 переулок кользова</p> 
      <p>д 51 офис 711</p> 
    </div> 
  </div> 
 
  <div class="item"> 
    <div> 
      <i class="fa fa-phone" aria-hidden="true"></i> 
    </div> 
    <div> 
      <p>8 800 000 000 00</p> 
      <p>8 800 000 000 00</p> 
    </div> 
  </div> 
 
  <div class="item"> 
    <div> 
      <i class="fa fa-envelope" aria-hidden="true"></i> 
    </div> 
    <div> 
      <p>mail@mail.ru</p> 
    </div> 
  </div> 
 
  <div class="item"> 
    <i class="fa fa-instagram" aria-hidden="true"></i> 
    <i class="fa fa-vk" aria-hidden="true"></i> 
    <i class="fa fa-facebook" aria-hidden="true"></i> 
    <i class="fa fa-youtube-play" aria-hidden="true"></i> 
  </div> 
 
</div>

Answer 2

Похоже на bootstrap. Если так, то вы не понимаете принципа его работы. Цифра после "md" в названии класса означает не порядковый номер блока, а занимаемую им ширину.

Ширина строки (row) 12 колонок. Если посмотреть на макет внимательно, то можно увидеть, что он состоит из 4 блоков шириной в 3 колонки. В первых трех блоках — иконка и текст, в четвертом блоке — 4 иконки.

<div class="row"> 
  <div class="col-md-3"> 
   
  </div> 
    <div class="col-md-3"> 
   
  </div> 
    <div class="col-md-3"> 
   
  </div> 
    <div class="col-md-3"> 
   
  </div> 
</div>

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

Все вопросы

ТОП-10

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

подключение ts файла в html

как подключить ts файл в htmlКак подключить js файл я знаю но ts нет

226

HTML

Как добавить сортировку к меткам карты?

Необходимо после карты добавить сортировку - такого типа: отображать все, отобразить аптеки, отобразить гостиницы(Только определенный набор...

214

HTML

Выделение текущего пункта меню на CSS

Начал делать меню на сайте, и столкнулся с проблемой, не могу понять, как посредством CSS можно выделить категорию меню в которой я сейчас нахожусь,...

182

HTML

Отправка файла на сервер php

Есть вот такой дизайн формы добавления файла http://joxiru/Grqly7PtQkJ8VA

188