Div並排只有部分可見

Question

我想在一個水平行中有一些div並排。我希望容器一次只能顯示滾動的一部分行。目前，div只有1列。也許我瘋了，不明白爲什麼這不起作用。謝謝！

看到這個的jsfiddle：http://jsfiddle.net/42kurwtp/

HTML

<div style="width: 300px; height: 300px; overflow:scroll;"> 
     <div id="blue"></div> 
     <div id="red"></div> 
     <div id="green"></div> 
     <div id="yellow"></div> 
    </div> 

CSS

<style> 
div { 
    width: 200px; 
    height: 200px; 
    float: left; 
} 
    #blue { 
     background: blue; 
    } 

    #red { 
     background: red; 
    } 

    #green { 
     background: green; 

    } 

    #yellow { 
     background: yellow; 
    } 
</style> 

Answer 1

<style> #row { 
 
    overflow: scroll; 
 
    width: 900px; 
 
    height: 70px; 
 
} 
 
#row div { 
 
    width: 200px; 
 
    height: 200px; 
 
    float: left; 
 
} 
 
#blue { 
 
    background: blue; 
 
} 
 
#red { 
 
    background: red; 
 
} 
 
#green { 
 
    background: green; 
 
} 
 
#yellow { 
 
    background: yellow; 
 
} 
 
</style>

<div class="row" id="row"> 
 
    <div id="blue">&nbsp;</div> 
 
    <div id="red">&nbsp;</div> 
 
    <div id="green">&nbsp;</div> 
 
    <div id="yellow">&nbsp;</div> 
 
</div>