Горизонтальная прокрутка CSS

Я пытаюсь создать <div> с серией фотографий, которые можно прокручивать только по горизонтали.

Это должно выглядеть примерно так: ССЫЛКА;

Однако вышеуказанное достигается только путем указания ширины для <div>, содержащего фотографии (чтобы они не «переносились по словам»). Если не указывать ширину - выглядит так;ССЫЛКА

Что я могу сделать с помощью CSS, чтобы предотвратить установку фиксированной ширины, поскольку изображения могут различаться.

Спасибо


html css horizontal-scrolling
person Simon R    schedule 29.03.2012    source источник

Ответы (5)


arrow_upward
108
arrow_downward

Вы можете использовать display:inline-block с white-space:nowrap. Пишите так:

.scrolls {
    overflow-x: scroll;
    overflow-y: hidden;
    height: 80px;
    white-space:nowrap
}
.imageDiv img {
    box-shadow: 1px 1px 10px #999;
    margin: 2px;
    max-height: 50px;
    cursor: pointer;
    display:inline-block;
    *display:inline;/* For IE7*/
    *zoom:1;/* For IE7*/
    vertical-align:top;
 }

Проверьте это http://jsfiddle.net/YbrX3/.

person sandeep    schedule 29.03.2012
comment
@sandeep, пожалуйста, помогите мне, я использовал ваш css, который находится в jsfiddle, и предположим, что некоторые данные динамически собираются с помощью вызова ajax, который хранится в кнопке, которая находится в нижнем колонтитуле, теперь, как я могу прокручивать эту кнопку, а не страницу окна, только нижний колонтитул - person Atul Dhanuka; 18.07.2013
comment
Как также поддерживать прокрутку, захватывая изображение и перетаскивая его влево/вправо? - person Edwin Evans; 10.11.2015
comment
white-space:nowrap был для меня ответом. - person Matthew Fritz; 02.06.2017

arrow_upward
4
arrow_downward

проверьте эту ссылку здесь, я изменяю display:inline-block http://cssdesk.com/gUGBH

person vicky    schedule 29.03.2012
comment
Хотя эта ссылка может ответить на вопрос, лучше включить сюда основные части ответа и предоставить ссылку для справки. Ответы, содержащие только ссылки, могут стать недействительными, если связанная страница изменится. - person guido; 26.05.2014

arrow_upward
1
arrow_downward

Вот решение с flexbox для изображений с переменной шириной и высотой:

.container {
  display: flex;
  flex-wrap: no-wrap;
  overflow-x: auto;
  margin: 20px;
}
img {
  flex: 0 0 auto;
  width: auto;
  height: 100px;
  max-width: 100%;
  margin-right: 10px;
}
<div class="container">
   <img src="http://placehold.it/100x100" />
   <img src="http://placehold.it/50x50" />
   <img src="http://placehold.it/5x50" />
   <img src="http://placehold.it/100x50" />
   <img src="http://placehold.it/50x100" />
   <img src="http://placehold.it/20x50" />
   <img src="http://placehold.it/50x30" />
   <img src="http://placehold.it/50x150" />
   <img src="http://placehold.it/250x50" />
   <img src="http://placehold.it/150x350" />
   <img src="http://placehold.it/50x350" />
   <img src="http://placehold.it/100x100" />
   <img src="http://placehold.it/50x50" />
   <img src="http://placehold.it/5x50" />
   <img src="http://placehold.it/100x50" />
   <img src="http://placehold.it/50x100" />
   <img src="http://placehold.it/20x50" />
   <img src="http://placehold.it/50x30" />
   <img src="http://placehold.it/50x150" />
   <img src="http://placehold.it/250x50" />
   <img src="http://placehold.it/150x350" />
   <img src="http://placehold.it/50x350" />
</div>

Тот же рабочий пример для: JsFiddle

person ǝsʞǝꓕ ɐuɹɐꓭ    schedule 14.12.2020

arrow_upward
0
arrow_downward

Используйте этот код для создания содержимого блоков горизонтальной прокрутки. Я взял это отсюда http://www.htmlexplorer.com/2014/02/horizontal-scrolling-webpage-content.html

<html>
<title>HTMLExplorer Demo: Horizontal Scrolling Content</title>
<head>
<style type="text/css">
#outer_wrapper {  
    overflow: scroll;  
    width:100%;
}
#outer_wrapper #inner_wrapper {
    width:6000px; /* If you have more elements, increase the width accordingly */
}
#outer_wrapper #inner_wrapper div.box { /* Define the properties of inner block */
    width: 250px;
    height:300px;
    float: left;
    margin: 0 4px 0 0;
    border:1px grey solid;
}
</style>
</head>
<body>

<div id="outer_wrapper">
    <div id="inner_wrapper">
        <div class="box">
            <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
             <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
            <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
            <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
             <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
            <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <!-- more boxes here -->
    </div>
</div>
</body>
</html>
person FrameWorker    schedule 11.02.2014

arrow_upward
0
arrow_downward

попробуйте использовать структуру таблицы, она более обратно совместима. Ознакомьтесь с этим Горизонтальная прокрутка с использованием таблиц

person phoenisx    schedule 02.07.2015