想试下做出fullpage.js的效果
但是每个区块不是正常的垂直排列,而是水平的排列
动画效果倒是不难实现
反而是让元素在水平方向上排列想爆了头
虽然最终还是实现了
但是我是把每个区块元素的css属性写成
#header, #body, #footer{position: absolute; height: 100%; width: 100%;}
#header{left: 0;}
#body{left: 100%;}
#footer{left: 200%;}
最终才近似地实现了水平方向排列的效果
毕竟这个是靠绝对定位完成的
我是想有没有其他方法可以令元素水平方向排列,而超出父元素内容后又向水平方向溢出呢?
这只是突然蹦出来的一个想法
当展示的内容超过当前窗口所能容纳的内容时
所有浏览器的默认行为都是给出垂直方向的滚动条
也就是说超出的内容会叠加到内容的下方
那么应该也能水平方向展示内容吧
而且这是布局问题
所以我想能不能用纯css实现
see是我们能看到的地方,超出的部分隐藏。然后main就是放section的地方。因为section有两个,所以main就是200%了,这样里面的section每个就是main的50%,就是see的100%。
但是如果动态的往main里加东西,不用js,我真没思路了。
<div id="see">
<div id="main">
<div class="section1">
1
</div>
<div class="section2">
2
</div>
</div>
</div>
#see {
width: 100%;
height: 100%;
overflow: hidden;
}
#main {
height: 100%;
width: 200%;
}
.section1 {
height: 100%;
width: 50%;
float: left;
background: red;
}
.section2 {
height: 100%;
width: 50%;
float: left;
background: red;
}
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。