Помощник
|
Css: как сделать увеличивающийся блок? |
prolisk
|
Сообщение
#1
|
||
|
|
||
|
|||
k0ttee |
20.8.2015, 8:54;
Ответить: k0ttee
Сообщение
#2
|
|
блок или скачет или двигает боковой Да потому что блин border не в счет размеров элемента, а плюс к размерам элемента. Вот блок и "скачет" на появлении/скрытии бордера. :rjunimagu: Может box-sizing? Собственно... box-sizing: border-box; Размеры элементов будут с учетом полей и границ. То есть: height = height + border + padding (и то же самое для width). Возможно и падинги придется подправить, зато прыгать с появлением рамки не будет - размер блока успокоится. :D Дока: Снимок экрана 2015-08-19 в 22.06.08.png ( 11,1 килобайт ) Кол-во скачиваний: 1146 Добавлено спустя 22 минуты 18 секунд: По первой ссылке сделано "через абсолютное позиционирование и слои", а сами блоки добавляются через :before Снимок экрана 2015-08-19 в 22.28.35.png ( 3,7 килобайт ) Кол-во скачиваний: 1146 По второй сейчас посмотрю... Может чего поинтересней увижу... Добавлено спустя 9 часов 24 минуты 14 секунд: кто поможет с кодом? Проблема была в том, что надо было выспаться... И не смотреть в говнокод магазинов (от него только кошмары приснятся). Как говорил конструктор танка Т34: "Сложно и дурак сможет, надо сделать просто". none.png ( 19,2 килобайт ) Кол-во скачиваний: 1142 1.png ( 20,74 килобайт ) Кол-во скачиваний: 1142 6.png ( 20,88 килобайт ) Кол-во скачиваний: 1142 9.png ( 20,91 килобайт ) Кол-во скачиваний: 1142 14.png ( 20,9 килобайт ) Кол-во скачиваний: 1142 18.png ( 20,88 килобайт ) Кол-во скачиваний: 1142 Никаких z-index, никаких absolute, просто отрицательный margin. :goodpost: Собственно hover задает отрицательный margin выделенному блоку, что позволяет его увеличить не влияя на соседние. <!DOCTYPE html>
<html> <head> <title>test</title> <style type="text/css"> body{ background: #000; } #list{ margin: 50px auto; width: 720px; height: 660px; background: #999; } .i{ background: #060; float: left; height: 200px; width: 100px; margin: 10px; } .i:hover{ background: yellow; margin: 10px -20px -20px -20px; width: 160px; height: 230px; opacity: .6; } </style> </head> <body> <div id='list'> <div class='i'>1</div> <div class='i'>2</div> <div class='i'>3</div> <div class='i'>4</div> <div class='i'>5</div> <div class='i'>6</div> <div class='i'>7</div> <div class='i'>8</div> <div class='i'>9</div> <div class='i'>10</div> <div class='i'>11</div> <div class='i'>12</div> <div class='i'>13</div> <div class='i'>14</div> <div class='i'>15</div> <div class='i'>16</div> <div class='i'>17</div> <div class='i'>18</div> </div> </body> </html> -------------------- btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9 |
|
|
prolisk
|
Сообщение
#3
|
|
|
Я знал кто мне поможет.
Спасибо за наводку. Сделал вото так. background: #FFFF34; margin: -3% -3% -1.5% -3%; width: 36%; height: 360px; padding-top: 3%; opacity: .6; gsgs.png ( 236,85 килобайт ) Кол-во скачиваний: 1129
-------------------- Блог вебмастера. Добавь свой сайт в белый каталог |
|
|
||
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Как в пушсетках покупают по 100-200 тысяч кликов за день? | 0 | Boymaster | 386 | Вчера, 1:56 автор: Boymaster |
|
Как вы бросили работу и перешли на заработок с сайтов? | 19 | uahomka | 3309 | 20.4.2024, 18:05 автор: Liudmila |
|
Как вы отдыхаете от работы за компом | 149 | adw-kupon.ru | 19774 | 20.4.2024, 17:41 автор: Liudmila |
|
Как вывести деньги в Украине с заблокированного Юмани ? | 30 | freeax | 4995 | 20.4.2024, 16:49 автор: Liudmila |
|
Арбитражники, как ведете учет расходов и доходов? | 13 | Boymaster | 2013 | 20.4.2024, 15:06 автор: Boymaster |
Текстовая версия | Сейчас: 23.4.2024, 10:33 |