Переполнение: скрытый не работает с изображениями

у меня есть этот CSS код:Переполнение: скрытый не работает с изображениями

#portrait{ 
    height: 300px; 
    width: 550px; 
    border: solid; 
    margin-right: auto; 
    margin-left: auto; 
    word-wrap:break-word; 
    overflow:hidden; 
} 
.image{ 
    float:left; 
    height: 30%; 
    border:solid 1px; 
    padding: 1px; 
    posit ion:relative; 
}

и HTML:

<div id="portrait"> 
<img class="image" src="http://media.indiatimes.in/media/photogallery/2012/Dec/best_images_of_2012_1355117665_1355117684.jpg"/> 
<!--Can't pull all images in here because it thinks my question is spam--> 
<img class="image" src="http://adrao.com.sapo.pt/soajo_sol.jpg"/> 
<img class="image" src="http://www.befrielsen1945.dk/temaer/internationalt/krigensgang/kilder/ofre.jpg"/> 
<img class="image" src="http://ionenewsone.files.wordpress.com/2009/08/oj-simpson-smiling-murder-trial.jpg"/> 
<img class="image" src="http://images.nymag.com/images/2/daily/2009/10/20091006_gossipgirl_560x375.jpg"/> 
<img class="image" src="http://images.nymag.com/images/2/daily/2009/10/20091006_gossipgirl_560x375.jpg"/> 
</div>

То, что я хочу сделать, это сделать переполнение изображения в x- (вместо того, чтобы первая блондинка находилась во втором ряду, я хочу, чтобы она была обрезана по мере необходимости, но все же осталась в первом ряду и так далее). Когда я переполняю-x, это не сработает. Любые мысли об этом?

источник

2013-11-30 user3050963

Взгляните на [Этот вопрос] (http://stackoverflow.com/questions/15082527/display-certain-phrases-depending-on-left-right-buttons-content-slider-for-text/15133551# 15133551) это может помочь вам, вам нужно сделать ваши изображения плавающими рядом друг с другом внутри содержащего div - вот пример скрипта [http://jsfiddle.net/2s95M](http://jsfiddle.net/2s95M/ 20 /) – Wez

http://jsfiddle.net/j4Ad7/ – Musa

Musa, есть ли другой способ сделать это, но в том числе «float: left»? Ты для тебя ответишь Вазли, но это именно то, что написал Муса, которого я ищу. – user3050963

С #portrait не допускается переполнение изображений, то требуется один дополнительный контейнер с заданной шириной, который будет содержать эти изображения внутри. Делают это так:

<div id="portrait"> 
    <div id="wrapper"> 
     your images 
...

А затем применить

#wrapper{ 
    height:30%; 
    overflow:hidden; 
    width: 1000px; /* it is only important to be bigger then parent for one image width size */ 
} 

.image{ 
    height: 100%;

источник

2013-11-30 00:44:06

Поскольку вы хотите, чтобы изображения плавали, но чтобы не переходить в другую строку, вам нужно что-то удерживать их, и это будет #wrapper, также #wrapper будет больше, чем портрет, поэтому переполнение: скрытый от #portrait сократит его хорошо, как вам нужно –

Теперь это замечательно! Огромное спасибо!! – user3050963

У меня была проблема, когда мое видео исчез, когда я использовал переполнение скрытый. Оказалось, мне нужно было установить ширину контейнера, а не только высоту. И мне не пришлось использовать какое-либо позиционирование на контейнере.

источник

2016-11-03 22:23:46

Переполнение: скрытый не работает с изображениями

ответ

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