html通道效果,html css：水平滚动通道？

非常简单的标记：

Headline 01

Lorem ipsum dolor...

Headline 02

Lorem ipsum dolor...

我的CSS看起来像这样：

.horizontal {

overflow-x:scroll;

clear:both;

}

.horizontal p {

float:left;

width:500px;

padding:0 20px 20px 0;

}

.horizontal p.image {

width:1024px;

}

我不知道如何在不使用实际帧的情况下创建类似于模型的水平“框架”.

现在,图像不会浮动,因为.horizo​​ntal的内容是#page-wrap内部的100％.所以他们在彼此之下对齐.我希望所有图像都在.horizo​​ntal中并排.每个泳道都应该有一个单独的滚动条,让我滚动图像.

我想创建这个：

不知道怎么解决这个问题？

此外,我还有一些我不知道如何解决的事情……例如如果存在必须滚动的实际内容,则应该出现滚动条或每个.horizo​​ntal(如果没有图像,则scollbar不应该在那里)

谢谢您的帮助

顺便说一句.我在我的项目中使用jquery,这只能用js吗？