多個div放置在同一行
1.float
<style type="text/css">.totalFieldDiv{
margin-left:5px;
margin-right:5px;
background-color:#00CC66;
width:180px;
height:40px;
float:left
}
</style>
</head>
<body>
<div style="border:#000000 thin solid; height:40px; width:900px; overflow:auto">
<div class="totalFieldDiv">
</div>
<div class="totalFieldDiv">
</div>
<div class="totalFieldDiv">
</div>
<div class="totalFieldDiv">
</div>
<div class="totalFieldDiv">
</div>
</div>
<script src="jquery-2.0.3.min.js"></script>
<script>
</script>
</body>
當設定浮動時，就不能夠設定左右滾動條。
overflow：所有主流瀏覽器都支援 overflow 屬性。
這個屬性定義溢位元素內容區的內容會如何處理。如果值為 scroll，不論是否需要，使用者代理都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內容也會出現滾動條。
不能同float一起使用
overflow , overflow-yvisible：
不剪下內容也不新增滾動條。假如顯式宣告此預設值，物件將被剪下為包含物件的window或frame的大小。並且clip屬性設定將失效
auto：
此為body物件和textarea的預設值。在需要時剪下內容並新增滾動條
hidden：
不顯示超過物件尺寸的內容
scroll：
橫向顯示滾動條
2. display: inline-block;
<style type="text/css">
#pull-left-attendTotalField{
margin-left:10px;
display: inline-block;
overflow-y: auto;
white-space: nowrap;
}
.totalFieldDiv{
padding-left:5px;
padding-right:5px;
display: inline-block;
background-color:#00CC66;
width:180px;
height:40px;
}
</style>
<body>
<div id="pull-left-attendTotalField" style="width: 781px;">
<div class="totalFieldDiv">
</div>
<div class="totalFieldDiv">
</div>
<div class="totalFieldDiv">
</div>
<div class="totalFieldDiv">
</div>
<div class="totalFieldDiv">
</div>
</div>
</body>
display:
white-space: