Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Евгения Царенко
0 / 0 / 0
Регистрация: 22.05.2015
Сообщений: 26
1

Как сделать блок адаптивным

01.10.2016, 08:13. Просмотров 407. Ответов 2
Метки нет (Все метки)

Всем привет! помогите пожалуйста настроить этот div для всех устройств.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="row">
  <div>
    <div class="circle">1</div>
  </div>
  <div>
    <h2>Lorem ipsum dolor.</h2>
  </div>
  <div>
    <div class="circle">2</div>
  </div>
  <div>
    <h2>Lorem ipsum dolor.</h2>
    <h2>Lorem ipsum dolor sit.</h2>
  </div>
  <div>
    <div class="circle">3</div>
  </div>
  <div>
    <h2>Lorem ipsum dolor.</h2>
    <h2>Lorem ipsum dolor sit.</h2>
  </div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.row{
  display: flex;
  justify-content:center;
  align-items:center;
  &>div:nth-child(odd){
    margin:0 10px;
  }
  &>div:nth-child(even){
    margin-right:25px;
  }
}
 
.circle{
  background-color: red;
  border-radius:50%;
  display:inline;
  color:white;
  text-align:center;
  padding:20px;
  font-weight:bold;
}
 
h2{
  margin:0;
}
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
01.10.2016, 08:13
Ответы с готовыми решениями:

Как сделать меню адаптивным
Добрый день. Есть меню, которое мне очень нравится. Но оно не адаптивное. как...

Как сделать действующий сайт адаптивным?
Доброе утро, ребята обращаюсь к знатокам по адаптивному дизайну, есть сайт...

Как сделать сайт адаптивным?(Резиновым)
Здраствуйте, дорогие форумчани! Я сверстал сайт с макета PSD. Но на...

Сделать адаптивным фоновую картинку
Всем хорошего времени суток! Друзья, на сайте http://oknoffsochi.ru/ во втором...

Растянуть видео на всю ширину, и сделать его адаптивным
Хелп! получается, что видео не растягивается полностью до конца, справа...

2
mrtoxas
Модератор
Эксперт HTML/CSS
2622 / 1935 / 1204
Регистрация: 12.07.2015
Сообщений: 5,163
Записей в блоге: 3
01.10.2016, 10:11 2
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
.row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
 
.item {
  display: flex;
  align-items: center;
  height: 100%;
}
 
.titles {
  margin-left: 10px;
}
 
.circle {
  flex: 0;
  background-color: red;
  border-radius: 50%;
  display: inline-block;
  color: white;
  text-align: center;
  padding: 15px 20px;
  font-weight: bold;
}
 
h2 {
  margin: 0;
}
 
.item:nth-child(2) {
  margin: 0 10px;
}
 
@media(max-width: 992px) {
  .row {
    align-items: flex-start;
  }
  .item {
    flex-direction: column;
    justify-content: center;
  }
}
 
@media(max-width: 768px) {
  .row {
    align-items: center;
    flex-direction: column;
  }
  .item {
    flex-direction: row;
  }
  .item:nth-child(2) {
    margin: 0;
  }
}
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="row">
  <div class="item">
    <div class="circle">1</div>
    <div class="titles">
      <h2>Lorem ipsum dolor.</h2>
    </div>
  </div>
  <div class="item">
    <div class="circle">2</div>
    <div class="titles">
      <h2>Lorem ipsum dolor.</h2>
      <h2>Lorem ipsum dolor.</h2>
    </div>
  </div>
  <div class="item">
    <div class="circle">3</div>
    <div class="titles">
      <h2>Lorem ipsum dolor.</h2>
      <h2>Lorem ipsum dolor.</h2>
    </div>
  </div>
</div>
Результат
0
Евгения Царенко
0 / 0 / 0
Регистрация: 22.05.2015
Сообщений: 26
02.10.2016, 16:17  [ТС] 3
mrtoxas, Круто! спасибо большое!!! прошу прощения, за поздний ответ
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
02.10.2016, 16:17

Как сделать блок
Подскажите пожалуйста, как лучше сделать такую выступающую надпись &quot;О нас&quot;?

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

Как сделать блок ссылкой?
Всем привет! Проблема простая, но почему-то не могу разобраться. Нужно сделать...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru