Html 如何使内容水平显示在页面的分隔部分？

我正在尝试为我的页面构建一个水平视差卷轴。然而，我似乎无法让内容出现在页面的不同部分，它们只是出现在同一部分，除了垂直分开。有什么想法吗

HTML:

网站： 编辑：我意识到我对我的问题的措辞没有那么具体，我忘了补充的是我想把所有这些都水平分割，就像这里看到的：

---

CSS格式的工作原理是，如果您为一个块指定了left，那么为了放置下一个块，您应该指定大于0的边距。至于汽车，它将开始从绝对位置边缘化。因此，所有内容都可能出现在一个块中，并且会变得混乱。

如果要将这些幻灯片堆叠到内容区域中，则需要添加以下内容：

div#transition-slide-container {
    position: relative;
}

及

这将使幻灯片完全相对于其容器放置，一个放在另一个上面

由于幻灯片div都具有相同的尺寸，因此无需单独声明它们。可以删除

div#home

，

div#公文包

等

现在，您可以将内容添加到幻灯片中，并按每张幻灯片对其进行定位/设置动画/显示/隐藏

div#transition-slide-container {    
    background: #bee1ff;
    height: 100%;
    padding-top: 128px;
    padding-bottom: 200px;
    width: 400%;
    min-height: 600px;
    z-index: -1;
    overflow: auto;
} 
.slide {
    min-width: 100%;
} 
div#home {
    width: 960px;
    margin: 0 auto;
    height: 600px;
} 
div#portfolio{
    width: 960px;
    margin: 0 auto;
    height: 700px;
}
div#about{
    width: 960px;
    margin: 0 auto;
    height: 600px;
}
div#contact {   
    width: 960px;
    margin: 0 auto;
    height: 600px;
 }

div.dx
 {
 width:1012px;
 padding:5px;
 border:1px solid gray;
 margin-left:273px;
 margin-top:15px;
 }
div.ex
 {
 width:1000px;
 padding:5px;
 border:1px solid gray;
 margin-left:273px;
 margin-top:5px;
 }

div#transition-slide-container {
    position: relative;
}

div#transition-slide-container .slide {
    position: absolute;
    top: 0;
    width: 960px;
    margin: 0 auto;
}