Как сделать ширину div для ребенка равным его содержимому с шириной div родителя 100% overflow-x: auto в IE & FF

Question

У меня есть галерея, полная эскизов. Я хотел добавить настраиваемую горизонтальную полосу прокрутки, чтобы пользователи могли прокручивать один ряд миниатюр. В каждой галерее есть разные количества эскизов. Я попытался использовать свойство CSS «width: -moz-max-content;» однако это работает только в Firefox, а не IE6,7,8, Chrome или Safari.

Вот пример ->http://theo.mypreview.co.uk/ashmolean-museum

Ширина веб-сайта устанавливается на 90% от размера телезрители браузера.

класса деления = "Content" - держатель
DIV ID = "должность" - где все эскизы создаются

Sidenote - Я только что установил jscroll

Answer 1

Есть некоторые очень хорошие JQuery доступных галерей, которые будут делать то, что вам нужно. Просто google jquery galleries. или http://www.1stwebdesigner.com/design/fresh-jquery-image-gallery-display-solutions/. Я надеюсь, что это помогает

Answer 2

Вы можете использовать некоторые из браузера специфических свойств CSS3:

#hero { 
    width: -moz-max-content; /* Firefox */ 
    width: intrinsic; /* Safari, Chrome */ 
} 

Для получения информации относительно этих свойств просмотра MDN документа:

https://developer.mozilla.org/en/CSS/max-width

Как вы заметили, они не поддерживают IE9/IE8/IE7 и, безусловно, не IE6. Однако я бы предположил, что решение вокруг этого будет заключаться в использовании JS для вычисления ширины и добавления ширины к элементу, который нуждается в этой функции.