Итак, моя проблема заключается в следующем. У меня есть сетка из 9 плиток, которую я хочу сделать отзывчивой.
Мне нужно, чтобы каждая плитка при наведении увеличивалась с 210x210px (включая поля 5px) до 420x420px, поэтому плитки A и B работают нормально, увеличиваясь в размере вправо и вниз, но когда я добираюсь до плитки C, возникает проблема. Несмотря на то, что все плитки имеют абсолютную позицию, когда я навожу курсор на C, его свойство padding-left не увеличивает его размер влево, а сдвигает его вправо. Есть ли решение этой проблемы?
Моя идея состоит в том, чтобы при наведении на каждую плитку открывать три слота для изображений гиперссылок. Левая и центральная плитки соответственно отображают по одному слоту ВПРАВО и два НИЖЕ от себя, а правые плитки - по одному слоту СЛЕВА от них и также два НИЖЕ.
Вот как выглядит CSS:
#row1-col1 {
width: 200px;
height: 200px;
position: absolute;
top: 0px;
left: 0px;
background: red;
margin: 5px;
-webkit-transition: padding-right .5s, padding-bottom .5s;
transition: padding-right .5s, padding-bottom .5s;
z-index: 98009;
}
#row1-col1:hover {
padding-right: 210px;
padding-bottom: 210px;
}
#row1-col2 {
width: 200px;
height:200px;
position: absolute;
top: 0px;
left: 210px;
background: red;
margin: 5px;
-webkit-transition: padding-right .5s, padding-bottom .5s;
transition: padding-right .5s, padding-bottom .5s;
z-index: 98008;
}
#row1-col2:hover {
padding-right: 210px;
padding-bottom: 210px;
}
#row1-col3 {
width: 200px;
height:200px;
position: absolute;
top: 0px;
left: 420px;
background: red;
margin: 5px;
float: right;
-webkit-transition: padding-left .5s, padding-bottom .5s;
transition: padding-left .5s, padding-bottom .5s;
z-index: 98007;
}
#row1-col3:hover {
padding-left: 210px;
padding-bottom: 210px;
}
Заранее спасибо за любой совет, который вы можете предложить, потому что я всю ночь бился головой, пытаясь решить эту проблему, но безуспешно. Лучшее, что я мог получить, это чтобы плитка (C) расширялась только вниз, но эта конфигурация оставила 9-ю и последнюю плитку (I) неспособной увеличивать свой размер ни в каком направлении, поэтому я мог расширить плитки с правой стороны до левый будет жизненно важен для меня в этом мини-проекте.
ПРЕДУПРЕЖДЕНИЕ! ЭТА ЧАСТЬ ЗАГРЯЗНА!: Варианты, которые я пробовал до сих пор, следующие: - Установите float: left; для всех плиток (первоначальная идея). Результат - Отказ / C-плитка не может изменить размер влево. - Установите абсолютные позиции для всех плиток. Результат - Ошибка / Плитка C не может изменить размер влево. -Установите абсолютные позиции для всех плиток, КРОМЕ C-плитки. Результат — Неудача — Установите float: left; на A и B и absolute position на C в надежде, что, поскольку A и B «игнорировали» C в своем расширении, они не мешать ему расширяться влево. Результат - жалкий провал.
