2

Всё бы ничего, но див сидит среди других дивов в одном ряду. Т.е. имеем, скажем, 5 div-ов. Наводишь на 2й слева мышкой - поменялась картинка и его ширина изменилась таким образом, чтобы сдвинуть остальные 3 справа в сторону. Я использую это:

.div1 { 
    background: url(/img/1.png) no-repeat;  
    width: 100px; 
    height: 400px; 
}
.div1:hover { 
    background: url(/img/8.png) no-repeat;
    width: 300px;
    transition-duration: 0.5s;
} 

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>

И идёт у меня 5 дивов. Cтили, соответственно, для каждого прописаны. Но все дивы выстраиваются друг под другом. Если назначить им { float: left;} то они становятся так, как нужно, но! перестаёт работать смента картинок и изменение размера. Как допилить? И как можно добавить в ту часть, которая появляется из-за увеличения ширины дива - всплывающий текст?

2
  • посмотри flex-box habrahabr.ru/post/257253, возможно это тебе поможет. если ссылка будет не действительна- то " указать здесь самое главное" уже небудет иметь смысла, потому ка уточнить уже негде будет. хотя самое главное уже указано: flex-box.
    – Вадим
    12 мая 2015 в 9:10
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 12 мая 2015 в 9:21

1 ответ 1

1

От добавления float: left ничего сломаться не должно. Смотрите пример http://jsfiddle.net/y9hqdzpd/

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

css

.item{width: 100px; height: 200px; background: url('http://upload.wikimedia.org/wikipedia/commons/c/c3/Aurora_as_seen_by_IMAGE.PNG'); transition-duration: 0.5s; float: left;}

.item:hover{width: 200px; background: url('http://www.thinkstockphotos.co.uk/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg');}

и сравнивайте со своим кодом. Возможно, у вас прописано что-то еще.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.