CodeSky 代码之空

实际上我们往往会有不想竖直滚动要想一路水平滚动的需求，比如今天在公司里就需要，其实是很简单的，不过对于结构来说，还是需要做一些改动。

1<div class="main">
2	<div class="img">
3		<div class="description">class</div>
4	</div>
5	<div class="img"></div>
6	<div class="img"></div>
7	<div class="img"></div>
8	<div class="img"></div>
9	<div class="img"></div>
10	<div class="img"></div>
11</div>
12

就比如说像这样。

然后CSS中我们定义：

1		.main {
2			height: 100px;
3			width: 440px;
4			overflow-x: auto;
5			overflow-y: hidden;
6			white-space: nowrap;
7		}
8
9		.img {
10			height: 100px;
11			width: 100px;
12			background: url('img/1.jpg') no-repeat;
13			background-size: 100%;
14			display: inline-block;
15			padding: 0 20px;
16		}
17

在此我们可以看到main中定义了长宽，这是为了让滚动条出现，方便测试，然后overflow-x/y这个就是横纵坐标啦，有三个值：hidden auto以及scroll

在这里，display:inline-blocks可以保证同行，实际上不换行是由white-space:nowrap。如果是float:left，可以实现原来我们所要的效果，但是他会脱离文本流，自动的由于无法浮动而往下跑，不受到white-space的约束，所以只能选择把展示方式改掉。

核心代码差不多就是这些啦。

关于float，可以见：CSS 谈谈浮动与清除浮动(overflow)，今天也被float坑了一把，由于float导致了文字环绕效果，最终用clear:left搞定。