css元素水平排列,水平方向溢出-问答-阿里云开发者社区-阿里云

开发者社区> a123456678> 正文

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

2016-03-26 14:41:55 1736 1

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

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

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

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

取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 19:16:13

    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;
    }
    0 0
相关问答

19

回答

【分享】如何提高网站的打开速度?

enj0y 2012-11-17 14:35:22 56718浏览量 回答数 19

42

回答

什么是云主机,云服务器与vps有什么区别?

zhuangdengyun 2011-11-01 04:21:50 49560浏览量 回答数 42

19

回答

【分享】如何提高网站的打开速度?

enj0y 2012-11-17 14:35:22 46928浏览量 回答数 19

31

回答

[@倚贤][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

弗洛伊德6 2018-10-27 21:52:43 145594浏览量 回答数 31

15

回答

网页挂马及暗链检测

yundun1 2012-02-24 17:40:01 47025浏览量 回答数 15

249

回答

阿里云LNAMP(Linux + Nginx + Apache + MySQL + PHP)环境一键安装脚本

云代维 2014-02-14 15:26:06 302578浏览量 回答数 249

13

回答

【云服务器分享】如何节省网站流量

dreamdoo 2012-10-15 10:36:09 80106浏览量 回答数 13

20

回答

【Java学习全家桶】1460道Java热门问题,阿里百位技术专家答疑解惑

管理贝贝 2018-05-31 13:57:45 45057浏览量 回答数 20

46

回答

H5技术百问——不懂H5你就OUT啦

yq传送门 2017-09-09 11:03:04 47038浏览量 回答数 46

2

回答

Nginx—owncloud安装记事

寒喵 2014-06-07 23:24:41 48512浏览量 回答数 2
+关注
0
文章
14879
问答
推荐问答
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载