水平滾動css？

Question

我想有一個<div>與水平滾動的id，但問題是它必須是響應，而不是固定的寬度。

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

Answer 1

您的寬度正好被設置爲自動：

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

這樣，你的DIV可以和possi一樣寬可以添加儘可能多的小貓圖片; 3

您div的寬度將根據其包含的子元素進行擴展。

jsFiddle

Answer 2

文章中塞爾維亞只要確保你添加box-sizing:border-box;您#myWorkContent。

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

Answer 3

使用最大寬度，而不是寬度

max-width:530px;

演示：http://jsfiddle.net/FPBWr/161/

Answer 4

我想這樣說：

* { 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％的10個網頁。我設置了我仍然有「頁」，其中每個都是100％的窗口（彩色編碼）。你可以用800％的包裝紙做八頁。我想你可以忽略這些顏色，並在繼續頁面上。我還設置了一個固定標題，但這不是必需的。希望這可以幫助。

Answer 5

下面爲我工作。

高度&寬度表示，如果你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;