2014-04-08 61 views
0

我正在创建具有垂直滚动的几个部分的此网页。每个部分的高度均为100%,因此每次在视口中有一个部分。现在我想达到相反的效果,因为每个部分都应该有两个部分,应该水平滚动(每个宽度都为100%)。水平卷轴问题

Ex。在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(不太好,因为我没用NG基金会)

+0

如何输出你想要的东西你可以画什么img –

+0

@PravinVaichal我想实现这样的事情:http://alvarotrigo.com/fullPage/#secondPage第二页(只是不使用插件,没有效果) –

回答

2

如果我明白你正确,你想要的东西类似如下:

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

邑这是答案,谢谢! –