Авто Ширина Div с внутренним img

Работа с настраиваемым слайдером изображения, установленным следующим образом;Авто Ширина Div с внутренним img

HTML

<div id="frameDiv"> 
    <div id="containerDiv"> 
     <img class="sliderImage" /> 
     <img class="sliderImage" /> 
    </div> 
</div>

CSS

#frameDiv { 
    height: 200px; 
    width: 450px; 
    overflow:hidden; 
    white-space: normal; 
} 

#containerDiv { 
    position: relative; 
    height: 200px; 
} 

.sliderImage { 
    max-height: 200px; 
    min-height: 200px; 
    min-width: 134px; 
    margin-right: 7px; 
    float:left; 
}

У меня есть #containerDiv ширина набор с jQuery прямо сейчас и слайдер работает, как ожидалось, с нажатием кнопки ползунок затем отображаются слайды и изображения. Однако изображения теперь добавляются динамически, и каждая ширина изображения не одинакова. Поэтому я бы хотел, чтобы ширина #containerDiv автоматически устанавливалась в соответствии с тем, насколько широкими изображения являются CSS. Я пытался установить float: left и display: inline-block на .sliderImage Я также попытался установить white-space: nowrap; на #containerDiv. Ничто не работает. Все изображения нажимаются ниже друг на друга на следующую строку, когда они должны быть все в одной строке, а затем они будут скрыты с настройкой переполнения. Есть ли способ сделать это без JavaScript или jQuery?

Редактировать: Я вынул переполнение: скрытый на этом jsfiddle, чтобы вы могли видеть, как он обертывается. http://jsfiddle.net/ut3o3pg3/

источник

2014-09-22 iRebel_85

вы можете сделать некоторый живой пример на jsfiddle или codepen -..... встроенного блок и белое пространство должны сделать трюк – DaniP

@Danko я только что добавил jsfiddle ссылки. Я вынул переполнение в CSS, чтобы вы могли увидеть, как он обертывается. –

Кажется, что ширина '# containerDiv' пытается установить ширину изображений, но она останавливается' # frameDiv'. –

Да там, добавить containerdiv IMG {внутри блока добавить ширину и высоту, если изображение} это должно дать ему фиксированный размер, если изображение меньше ширина и высота меньше, чем свойства в сНу изображения будет растянута, и если будет увеличено изображение, оно будет уменьшено.

источник

2014-09-22 21:05:03 kiiiidJesse

Я не пытаюсь растянуть изображения до ширины/высоты '# containerDiv'. Я пытаюсь установить ширину '# containerDiv' в общую ширину всех изображений внутри. –

Попробуйте добавить ширину к контейнеру div – kiiiidJesse

Добавить display: table; в #containerDiv и #frameDiv, чтобы динамически выращивать их в соответствии с их содержанием.

Добавить white-space: nowrap; в #containerDiv и display: inline-block; в .sliderImage, чтобы заставить изображения отображаться в строке.

Проверьте это здесь: jsFiddle

источник

2014-09-22 23:26:38

Авто Ширина Div с внутренним img

ответ

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