У меня есть несколько изображений (3), которые должны отображаться в одной строке и чья общая ширина больше, чем ширина страницы. Но я все равно хочу, чтобы они перекрывались, поэтому ширина страницы не имеет значения. Но по какой-то причине только 2 изображения идут в одну строку, а третье - в следующем. Как мне разобраться. Они отлично работают, если я делаю .imageContainer
как position:abolute
и даю left:--px
значениям для каждого идентификатора. Но это будет трудно поддерживать и выровнять. Кроме того, они присоединяются правильно, если я уменьшить ширину каждого изображения, но я не хочу, чтобы сделать это :(. Пожалуйста, помогите.Как получить все изображения (перекрытие разрешено) в одной строке с помощью css?
UPDATE white-space:nowrap;
помещен в allImagesContainer решил эту проблему, но . только в хроме проблема сохраняется в FF и IE
Вот код:.
<div class="allImagesContainer">
<div class="imageContainer" id="firstImage">
<img src="images/android1.png"/>
<div class="innerText"></div>
</div>
<div class="imageContainer" id="biggerImage" >
<img src="images/android2.png"/>
<div class="innerText"></div>
</div>
<div class="imageContainer" id="lastImage">
<img src="images/android3.png"/>
<div class="innerText"></div>
</div>
</div>
а вот стиль:
.allImagesContainer {
position: relative;
top: 50px;
width: 80%;
height: 500px;
margin-left: auto;
margin-right: auto;
display: table ;
}
.imageContainer{
position: relative;
display: inline-block;
}
#firstImage{
z-index: 1;
}
#biggerImage{
position: relative;
left: -50px;
z-index: 2;
}
#lastImage{
position: relative;
left: -40px;
z-index: 1;
}
Спасибо! Это сработало ... Мне нравится этот сайт. – looneyGod
К сожалению, он не работает для Firefox или IE. У меня такая же проблема, как и в хром, перед добавлением 'white-space: nowrap' в' allImagesContainer'. Любое предложение? – looneyGod
Посмотрите, работает ли демонстрация, добавленная в мой ответ, в этих браузерах. Он работает для меня в Firefox 17.0.1 и ie9. Какие версии браузеров вы используете? – sh0ber