css cuộn ngang?

Question

Tôi muốn có một <div> với id có cuộn ngang, nhưng vấn đề là nó phải đáp ứng, không phải với chiều rộng cố định.

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 --> 

Nhờ http://jsfiddle.net/clairesuzy/FPBWr/

Vấn đề là với 530px đó. Tôi muốn sử dụng 100% thay thế. Nhưng sau đó tôi có trang cuộn và di chuyển của DIV đi đúng, không thể có được nó, bất kỳ ý tưởng?

Dưới đây là bài viết trong Serbia về giải pháp http://www.blog.play2web.com/index.php?id=18

Answer 1

Chỉ cần thiết lập chiều rộng của bạn để tự động:

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

Bằng cách này div của bạn có thể rộng như possi ble, vì vậy bạn có thể thêm nhiều hình ảnh con mèo nhất có thể, 3

Chiều rộng của div sẽ mở rộng dựa trên các phần tử con chứa.

jsFiddle

Answer 2

Chỉ cần chắc chắn bạn thêm box-sizing:border-box;-#myWorkContent của bạn.

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

Answer 3

sử dụng max-width thay vì chiều rộng

max-width:530px;

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

Answer 4

I figured nó theo cách này:

* { 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> 

Tôi có wrapper ở 1000% và mười trang tại mỗi 10%. Tôi thiết lập của tôi lên đến vẫn còn có "trang" với mỗi là 100% của cửa sổ (mã màu). Bạn có thể làm tám trang với một wrapper 800%. Tôi đoán bạn có thể bỏ qua màu sắc và tiếp tục trang. Tôi cũng thiết lập một tiêu đề cố định, nhưng điều đó không cần thiết. Hi vọng điêu nay co ich.

Answer 5

Dưới đây làm việc cho tôi.

Chiều cao & chiều rộng được thực hiện để chỉ ra rằng, nếu bạn 2 trẻ em đó, nó sẽ cuộn theo chiều ngang, vì chiều cao của trẻ lớn hơn chiều cao của phụ huynh cuộn theo chiều dọc.

CSS phụ huynh:

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

Trẻ em CSS:

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

Để cuộn theo chiều ngang chỉ:

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

Để cuộn theo chiều dọc chỉ:

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