地平线卷轴问题

Question

我正在创建这个网页，其中有几个部分是垂直滚动。每个区域的高度都是100%，所以在视口中每一段时间都有一个部分。现在，我想要实现oposite效应，因为每个部分应该有两个部分，应该是水平滚动(每个100%的宽度)。

例如。在jsFiffle中，第一部分有两个带有标题的div：

我们的总部在地点

和

We2以位置为基础

<!-- section I -->
    <div class="section row">
      <div class="section-content">
        <h2>We are company</h2>
        <p>We are a digital marketing agency based on Hong Kong, founded in 2010.</p>
        <p>We help brands be digital by providing a range of related services including: design & branding, web development, digital communications, social media, and online advertising.  We live all around the world and call ourselves account analysts and managers, designers, developers, project managers and friends and teammates.  We have helped clients big and small, with both shot-term and yearly retainer project work.  We are always interested to grow our knowledge and experience.</p>
        <p>Thank you for visiting our website.</p>
      </div>

      <div class="second-content">
        <h2>We2 are company</h2>
        <p>We are a digital marketing agency based on Hong Kong, founded in 2010.</p>
        <p>We help brands be digital by providing a range of related services including: design & branding, web development, digital communications, social media, and online advertising.  We live all around the world and call ourselves account analysts and managers, designers, developers, project managers and friends and teammates.  We have helped clients big and small, with both shot-term and yearly retainer project work.  We are always interested to grow our knowledge and experience.</p>
        <p>Thank you for visiting our website.</p>
      </div>
    </div>
    <!-- end section I -->

这是我的jsFiffle(不是很好，因为我使用的是基金会)

Answer 1

如果我对你的理解是正确的，你想要的东西如下：

http://jsfiddle.net/8Dz9n/

<div class="section">
    <div class=" row">
        <div class="section-content">
            <h2>We are company</h2>
            <p>We are a digital marketing agency based on Hong Kong, founded in 2010.</p>
            <p>We help brands be digital by providing a range of related services including: design & branding, web development, digital communications, social media, and online advertising.  We live all around the world and call ourselves account analysts and managers, designers, developers, project managers and friends and teammates.  We have helped clients big and small, with both shot-term and yearly retainer project work.  We are always interested to grow our knowledge and experience.</p>
            <p>Thank you for visiting our website.</p>
        </div>

        <div class="second-content">
            <h2>We2 are company</h2>
            <p>We are a digital marketing agency based on Hong Kong, founded in 2010.</p>
            <p>We help brands be digital by providing a range of related services including: design & branding, web development, digital communications, social media, and online advertising.  We live all around the world and call ourselves account analysts and managers, designers, developers, project managers and friends and teammates.  We have helped clients big and small, with both shot-term and yearly retainer project work.  We are always interested to grow our knowledge and experience.</p>
            <p>Thank you for visiting our website.</p>
        </div>
    </div>
</div>

CSS

.section {height:100%; width:100%;}
.row {width:200%; height:100%;}
.section-content, .second-content  {float:left; height:100%; width:50%; background:red;}