Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
0 / 0 / 0
Регистрация: 06.09.2016
Сообщений: 2
1

Сделать статичными блоки при увеличении размера блока

07.09.2016, 12:18. Просмотров 808. Ответов 3
Метки нет (Все метки)

Есть несколько блоков div, идущие подряд сверху вниз. Каждый содержит некоторый текст. При событии hover на div текст увеличивается с 11 px до 13 px, при этом высота div немного увеличивается, из-за чего все нижестоящие div съезжают вниз, но это некрасиво, так как получается, что вся страница прыгает.
Как можно сделать, чтобы нижестоящие блоки не съезжали вниз? Задать фиксированную высоту div я не могу, т.к. все div разной высоты. Может быть можно как-то задать блоку div заранее высоту, которую он принимает при увеличении текста внутри div?
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
07.09.2016, 12:18
Ответы с готовыми решениями:

Изменение размера картинки при увеличении размера экрана
Добрый день. Как можно сделать следующее: Имеется картинка большого размера, при заходе с малым...

Найти все трехзначные числа, которые при увеличении на 1 делятся на 2, при увеличении на 2 делятся на 3, при увеличении
Помогите разобраться с задачой Найти все трехзначные числа, которые при увеличении на 1...

Смещение блока при уменьшении, увеличении масштаба
<!DOCTYPE html> <html> <head> <title>BeerUtopia.ru</title> <meta charset="utf-8"/> ...

При увеличении страницы, или уменьшении окна браузера, div блоки съезжают в право
Помогите пожалуйста, при увеличении страницы, или уменьшении окна браузера, div блоки съезжают в...

3
Эксперт HTML/CSS
2943 / 2507 / 1063
Регистрация: 15.12.2012
Сообщений: 9,389
Записей в блоге: 9
07.09.2016, 12:28 2
mathsik, задайте фиксированную высоту блокам с текстом, как вариант... Пример:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>InfoPage</title>
</head>
<style>
    div{width: 400px; height:40px; margin: 0 auto; padding:10px; box-sizing:border-box; border:1px solid red; font:11px/1.25 Tahoma; text-align: center}
    div:hover{font:13px/1.25 Tahoma}
</style>
<body>
    <div>Текст</div>
    <div>Текст</div>
    <div>Текст</div>
    <div>Текст</div>
    <div>Текст</div>
    <div>Текст</div>
    <div>Текст</div>
</body>
</html>
0
0 / 0 / 0
Регистрация: 06.09.2016
Сообщений: 2
07.09.2016, 13:19  [ТС] 3
У каждого div своя высота, которая заранее не известна (текст из берётся из базы данных), поэтому прописать фиксированную высоту - не вариант.
0
Эксперт HTML/CSS
2943 / 2507 / 1063
Регистрация: 15.12.2012
Сообщений: 9,389
Записей в блоге: 9
07.09.2016, 13:24 4
mathsik, ну значит не вариант с увеличением, что я ещё могу сказать... Только абсолютное позиционирование и то с костылями...
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
07.09.2016, 13:24

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Статические размеры изображения при увеличении родительского блока
Всем привет. Как отменить увеличение картинки? Я иммею ввиду , что если див становится больше ,...

Пропадает содержимое в WebBrowser при увеличении размера
Доброго времени суток бойцы... Такой вопросик , создаю я значится компонент вебброузер в C# ,...

Почему меняется высота блока при увеличении padding-top?
Добрый день! Не могу понять такую вещь. Блок с display:inline-block должен вести себя как строка....

Получить новую матрицу, переставляя ее блоки размера п х п по часовой стрелке, начиная с блока в левом верхнем углу
Дана действительная квадратная матрица порядка 2n. Получить новую матрицу, переставляя ее блоки...


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

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

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