Question

我正在创建此网页，其中几个部分都是垂直滚动的。每个部分的高度均为100％，因此视口中每次都有一个部分。现在我想实现相反的效果，因为每个部分应该有两个部分，应该在水平滚动（每个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/

<强> HTML

<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;}

水平滚动问题

1 个答案: