开发者社区> 问答> 正文

css元素水平排列,水平方向溢出

想试下做出fullpage.js的效果
但是每个区块不是正常的垂直排列,而是水平的排列
动画效果倒是不难实现
反而是让元素在水平方向上排列想爆了头
虽然最终还是实现了
但是我是把每个区块元素的css属性写成

#header, #body, #footer{position: absolute; height: 100%; width: 100%;}
#header{left: 0;}
#body{left: 100%;}
#footer{left: 200%;}

最终才近似地实现了水平方向排列的效果
毕竟这个是靠绝对定位完成的
我是想有没有其他方法可以令元素水平方向排列,而超出父元素内容后又向水平方向溢出呢?

这只是突然蹦出来的一个想法
当展示的内容超过当前窗口所能容纳的内容时
所有浏览器的默认行为都是给出垂直方向的滚动条
也就是说超出的内容会叠加到内容的下方
那么应该也能水平方向展示内容吧
而且这是布局问题
所以我想能不能用纯css实现

展开
收起
a123456678 2016-03-26 14:41:55 2576 0
1 条回答
写回答
取消 提交回答
  • 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;
    }
    2019-07-17 19:16:13
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
零基础CSS入门教程 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载