关于子DIV横向排列的CSS设置

今天产品中设计到一个问题就是往DIV里面加子Div，宽度超过父类Div的宽度，想要显示滚动条而不是换行重新添加。

 其实可以用table 或用ul,li标签实现，我为了图省事，简单改了下CSS样式。

测试代码如下：

	<div style="width:300px; height:200px; background:red;overflow-x: auto;position: relative;">
		<div style="width:120px; height:150px; background:blue;position: absolute;left: 0px;"> </div>
		<div style="width:120px; height:150px; background:green;position: absolute;left: 120px;"></div>
		<div style="width:120px; height:150px; background:orange;position: absolute;left: 240px;"></div>
	</div>

 

效果如下：

 

当时尝试了用dispaly属性来修改，但一直未成功，这样写不得不给个left一个具体值，感觉不妥，但产品里的比较复杂，用table做界面没有原先的好。暂时用了absolute和left来达到效果。

 

个人感觉应该还有其他的实现方式。待后续研究。