Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.92/13: Рейтинг темы: голосов - 13, средняя оценка - 4.92
1 / 1 / 1
Регистрация: 13.03.2017
Сообщений: 48
1

Выравнивание высоты всех блоков по одному самому большому

03.12.2017, 22:15. Показов 2693. Ответов 4
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Нужно выровнять все блоки по одному самому большому

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
59
60
61
62
63
64
65
66
67
68

.crp_related {
    clear: both;
    margin: 10px 0;
}
.crp_related h3 {
    margin: 0 !important;
}
.crp_related ul {
    list-style: none;
    float: left;
    margin: 0 !important;
    padding: 0 !important;
}
.crp_related li, .crp_related a {
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
}
.crp_related li {
    margin: 5px !important;
    border: 1px solid #ddd;
    padding: 6px;
}
.crp_related li:hover {
    background: #eee;
    border-color: #bbb;
}
.crp_related a {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
.crp_related a:hover {
    text-decoration: none;
}
.crp_related .crp_title {
    color: #fff !important;
    display: block;
    bottom: 0;
    padding: 3px;
    color: #fff;
    font-size: .9em;
    text-shadow: 1000 .1em .1em .2em;
    background: rgb(0.5, 0.5, 0.5);
    background: rgba(0, 0, 0, 0.5);
    max-width: 185px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.crp_related li:hover .crp_title {
    background: rgb(0.2, 0.2, 0.2);
    background: rgba(0, 0, 0, 0.8);
}
.crp_related li {
    vertical-align: bottom;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4);
    box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.crp_clear {
    clear: both;
}
.crp_title:visited {
    color: #fff !important;
}
HTML5
1
2
3

<div class="crp_related "><h3>Пример</h3>
<ul>
<li><a href="http://w.pro-ks.ru/aim/" rel="nofollow"><img src="http://w.pro-ks.ru/wp-content/uploads/2017/12/aims.jpg" alt="Скачать Aim для кс 1.6" title="Скачать Aim для кс 1.6" style="max-width:185px;max-height:160px;" class="crp_thumb crp_featured"><span class="crp_title">Скачать Aim для кс 1.6</span></a></li><li><a href="http://w.pro-ks.ru/spidhak/" rel="nofollow"><img src="http://w.pro-ks.ru/wp-content/uploads/2017/12/speedhack2.jpg" alt="Скачать спидхак для кс 1.6" title="Скачать спидхак для кс 1.6" style="max-width:185px;max-height:160px;" class="crp_thumb crp_featured"><span class="crp_title">Скачать спидхак для кс 1.6</span></a></li><li><a href="http://w.pro-ks.ru/banihop-knajfbot/" rel="nofollow"><img src="http://w.pro-ks.ru/wp-content/uploads/2017/12/BunnyHop.jpg" alt="Скачать банихоп &amp; КнайфБот для кс 1.6" title="Скачать банихоп &amp; КнайфБот для кс 1.6" style="max-width:185px;max-height:160px;" class="crp_thumb crp_featured"><span class="crp_title">Скачать банихоп &amp; КнайфБот для кс 1.6</span></a></li><li><a href="http://w.pro-ks.ru/antiban/" rel="nofollow"><img src="http://w.pro-ks.ru/wp-content/uploads/2017/12/h4iter.jpg" alt="Скачать антибан для кс 1.6" title="Скачать антибан для кс 1.6" style="max-width:185px;max-height:160px;" class="crp_thumb crp_featured"><span class="crp_title">Скачать антибан для кс 1.6</span></a></li></ul><div class="crp_clear"></div></div>
полностью код
Кликните здесь для просмотра всего текста

HTML5
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

<!doctype html>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Главная</title>
<style>
.crp_related {
    clear: both;
    margin: 10px 0;
}
.crp_related h3 {
    margin: 0 !important;
}
.crp_related ul {
    list-style: none;
    float: left;
    margin: 0 !important;
    padding: 0 !important;
}
.crp_related li, .crp_related a {
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
}
.crp_related li {
    margin: 5px !important;
    border: 1px solid #ddd;
    padding: 6px;
}
.crp_related li:hover {
    background: #eee;
    border-color: #bbb;
}
.crp_related a {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
.crp_related a:hover {
    text-decoration: none;
}
.crp_related .crp_title {
    color: #fff !important;
    display: block;
    bottom: 0;
    padding: 3px;
    color: #fff;
    font-size: .9em;
    text-shadow: 1000 .1em .1em .2em;
    background: rgb(0.5, 0.5, 0.5);
    background: rgba(0, 0, 0, 0.5);
    max-width: 185px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.crp_related li:hover .crp_title {
    background: rgb(0.2, 0.2, 0.2);
    background: rgba(0, 0, 0, 0.8);
}
.crp_related li {
    vertical-align: bottom;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4);
    box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.crp_clear {
    clear: both;
}
.crp_title:visited {
    color: #fff !important;
}
</style>
</head>
<body style="background:rgba(159, 157, 157, .3);">
<div class="crp_related "><h3>Пример</h3>
<ul>
<li><a href="http://w.pro-ks.ru/aim/" rel="nofollow"><img src="http://w.pro-ks.ru/wp-content/uploads/2017/12/aims.jpg" alt="Скачать Aim для кс 1.6" title="Скачать Aim для кс 1.6" style="max-width:185px;max-height:160px;" class="crp_thumb crp_featured"><span class="crp_title">Скачать Aim для кс 1.6</span></a></li><li><a href="http://w.pro-ks.ru/spidhak/" rel="nofollow"><img src="http://w.pro-ks.ru/wp-content/uploads/2017/12/speedhack2.jpg" alt="Скачать спидхак для кс 1.6" title="Скачать спидхак для кс 1.6" style="max-width:185px;max-height:160px;" class="crp_thumb crp_featured"><span class="crp_title">Скачать спидхак для кс 1.6</span></a></li><li><a href="http://w.pro-ks.ru/banihop-knajfbot/" rel="nofollow"><img src="http://w.pro-ks.ru/wp-content/uploads/2017/12/BunnyHop.jpg" alt="Скачать банихоп &amp; КнайфБот для кс 1.6" title="Скачать банихоп &amp; КнайфБот для кс 1.6" style="max-width:185px;max-height:160px;" class="crp_thumb crp_featured"><span class="crp_title">Скачать банихоп &amp; КнайфБот для кс 1.6</span></a></li><li><a href="http://w.pro-ks.ru/antiban/" rel="nofollow"><img src="http://w.pro-ks.ru/wp-content/uploads/2017/12/h4iter.jpg" alt="Скачать антибан для кс 1.6" title="Скачать антибан для кс 1.6" style="max-width:185px;max-height:160px;" class="crp_thumb crp_featured"><span class="crp_title">Скачать антибан для кс 1.6</span></a></li></ul><div class="crp_clear"></div></div>
</body>
</html>
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 03.12.2017, 22:15
Ответы с готовыми решениями:

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

Выравнивание блоков двухколоночного резинового макета по высоте через CSS без задания конкретной высоты
Здравствуйте! Есть страница с двумя колонками. Левая колонка имеет фиксированную ширину, правая...

Сделать ширину комбобокса по самому большому элементу в нем
Позаимствовал код перелпределения стиля на msdn, но не могу понять, как сделать ширину комбобокса...

Адаптивность блоков и её высоты
Всем привет! А кто мне может посоветовать как сделать так, чтобы, например, когда я экран сужаю и...

4
0 / 0 / 0
Регистрация: 04.12.2017
Сообщений: 2
04.12.2017, 14:28 2
Могу предложить обходное решение, подгонять "max-width" под нужный размер:https://codepen.io/Chips86/pen/JOzRqj
0
278 / 272 / 106
Регистрация: 12.01.2016
Сообщений: 1,666
05.12.2017, 14:52 3
Konstantin12312, для самого просто решения проблемы можете найти картинки одинакового размера или увеличить до одинакового размета все остальные и вставить их в блоки (если контент не будет меняться в дальнейшем), а если контент планируется меняться, тогда придется менять полностью верстку ибо она ужасна. Скажи мне пожалуйста, зачем ты используешь свойство !important? И почему у тебя весь HTML код написан в одну строчку?
0
0 / 0 / 2
Регистрация: 26.03.2017
Сообщений: 5
05.12.2017, 16:24 4
Похоже скопировал код с живой страницы...вот и в одну строку)
Дополнительно к простому способу от Freeze_Breeze, если не хочешь ничего менять и плевать на качество картинок,то можешь добавить в стили css к классу crp_thumb или crp_featured (в HTML данные классы прописан, но в css их не увидел):
CSS
1
2
3
4

.crp_thumb {
  min-width:185px;
  min-height:160px;
}
P.S. Либо тут отрывок из какого то большого проекта либо рекомендую все переписать.
0
1 / 1 / 1
Регистрация: 13.03.2017
Сообщений: 48
06.12.2017, 08:17  [ТС] 5
это плагин выводит код, во избежании добавление какой-то дополнительной разметки, я не стал пока редактировать код

Добавлено через 46 секунд
такой вариант тут не подойдет
0
06.12.2017, 08:17
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 06.12.2017, 08:17
Помогаю со студенческими работами здесь

Выравнивание блоков
Есть сайт на вордпрессе. Почему-то блоки отображаются странно. Вот так выглядит как должно быть...

Выравнивание блоков
Привет! Не могу выровнять блок с картинкой и блок с текстом при уменьшении окна браузера. Зелёный...

Выравнивание блоков
CSS. У меня на форме два div-а которые расположены горизонтально. Тот div что слева занимает ширину...

Выравнивание блоков
В чем разница, при выравнивании блоков через display: inline-block; или через float: left; ...

Выравнивание блоков
Привет, никак не могу сообразить в чем дело, почему футер не хочет прижиматься к низу, блоки с...

Не работает пример выравнивания высоты блоков
Нашел на просторах вот этот код https://codepen.io/andrej-zhakenow/pen/jXRryv &lt;header&gt;Шапка...


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

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru