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

开发者社区> 问答> 正文

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

2016-03-26 14:41:55 1808 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 57025浏览量 回答数 19

43

回答

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

zhuangdengyun 2011-11-01 04:21:50 49920浏览量 回答数 43

19

回答

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

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

31

回答

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

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

15

回答

网页挂马及暗链检测

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

249

回答

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

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

13

回答

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

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

20

回答

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

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

46

回答

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

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

3

回答

Nginx—owncloud安装记事

寒喵 2014-06-07 23:24:41 48766浏览量 回答数 3
+关注
0
文章
14879
问答
问答排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载