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

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

html, body {margin: 0; padding: 0;}

#myWorkContent{
    width:530px;
    height:210px;
    border: 13px solid #bed5cd;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

#myWorkContent a {
    display: inline-block;
    vertical-align: middle;
}

#myWorkContent img {border: 0;}

<div id="myWorkContent">
     <a href="assets/work/1.jpg"><img src="http://placekitten.com/200/200/" height="190"></a>
     <a href="assets/work/2.jpg"><img src="http://placekitten.com/120/120/"/></a>
     <a href="assets/work/3.jpg"><img src="http://placekitten.com/90/90/" height="90" width="90"></a>
     <a href="assets/work/4.jpg"><img src="http://placekitten.com/50/50/" height="190"></a>
     <a href="assets/work/5.jpg"><img src="http://placekitten.com/100/100/"></a>
     <a href="assets/work/6.jpg"><img src="http://placekitten.com/200/200/" height="190"></a>
</div><!-- end myWorkContent -->

Благодаря http://jsfiddle.net/clairesuzy/FPBWr/

Проблема в том, что 530px. Вместо этого я хотел бы использовать 100%. Но потом я получил прокрутку страницы и прокрутку DIV, это правда, не может понять, какая идея?

Вот статья на сербском языке о решении http://www.blog.play2web.com/index.php?id=18

Ответ 1

Просто установите ширину в auto:

#myWorkContent{
    width: auto;
    height:210px;
    border: 13px solid #bed5cd;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

Таким образом, ваш div может быть как можно шире, поэтому вы можете добавить как можно больше изображений котенка, 3

Ваша ширина div будет расширяться на основе дочерних элементов, которые она содержит.

jsFiddle

Ответ 2

Ниже работал у меня.

Высота и ширина берутся, чтобы показать, что если вы 2 таких ребенка, он будет прокручиваться по горизонтали, так как высота ребенка больше высоты родительской прокрутки по вертикали.

Родительский CSS:

.divParentClass {
    width: 200px;
    height: 100px;
    overflow: scroll;
    white-space: nowrap;
}

Дети CSS:

.divChildClass {
    width: 110px;
    height: 200px;
    display: inline-block;
}

Для прокрутки только по горизонтали:

overflow-x: scroll;
overflow-y: hidden;

Для прокрутки только по вертикали:

overflow-x: hidden;
overflow-y: scroll;

Ответ 3

Просто убедитесь, что вы добавили box-sizing:border-box; к #myWorkContent.

http://jsfiddle.net/FPBWr/160/

Ответ 4

используйте максимальную ширину вместо ширины

max-width:530px;

demo: http://jsfiddle.net/FPBWr/161/

Ответ 5

Я понял это так:

* { padding: 0; margin: 0 }
body { height: 100%; white-space: nowrap }
html { height: 100% }

.red { background: red }
.blue { background: blue }
.yellow { background: yellow }

.header { width: 100%; height: 10%; position: fixed }
.wrapper { width: 1000%; height: 100%; background: green }
.page { width: 10%; height: 100%; float: left }

<div class="header red"></div>
<div class="wrapper">
    <div class="page yellow"></div>
    <div class="page blue"></div>
    <div class="page yellow"></div>
    <div class="page blue"></div>
    <div class="page yellow"></div>
    <div class="page blue"></div>
    <div class="page yellow"></div>
    <div class="page blue"></div>
    <div class="page yellow"></div>
    <div class="page blue"></div>
</div>

У меня есть обертка на 1000% и десять страниц по 10% каждая. Я установил, что у меня все еще есть "страницы", каждый из которых составляет 100% окна (цветной код). Вы можете сделать восемь страниц с оберткой на 800%. Я думаю, вы можете оставить свои цвета и продолжить на странице. Я также настроил фиксированный заголовок, но это не обязательно. Надеюсь, это поможет.