2013-03-23 1 views
2

У меня есть несколько изображений (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; 
} 

ответ

0

white-space:nowrap; является то, что вы ищете, находится в allImagesContainer

См DEMO

+0

Спасибо! Это сработало ... Мне нравится этот сайт. – looneyGod

+0

К сожалению, он не работает для Firefox или IE. У меня такая же проблема, как и в хром, перед добавлением 'white-space: nowrap' в' allImagesContainer'. Любое предложение? – looneyGod

+0

Посмотрите, работает ли демонстрация, добавленная в мой ответ, в этих браузерах. Он работает для меня в Firefox 17.0.1 и ie9. Какие версии браузеров вы используете? – sh0ber

0

Если вы не хотите, разрывы строк, вы можете использовать этот CSS на allImagesContainer

.allImagesContainer 
{ 
    white-space:nowrap; 
} 

Вы можете снять положение: абсолютное и относительное по всем элементам, но сохранить дисплей: встроенный блок

+0

Да, спасибо, что работает. Но я не хочу удалить относительный/абсолютный, поскольку я хочу, чтобы они перекрывались. Еще раз спасибо. – looneyGod

+0

Он отлично работал для хрома. Но не работает ни для кого других (для FF и IE). Помогите. – looneyGod

Смежные вопросы