css实现两栏布局的方法有哪些-创新互联

这篇文章将为大家详细讲解有关css实现两栏布局的方法有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联于2013年开始,先为滴道等服务建站,滴道等地企业,进行企业商务咨询服务。为滴道企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

1、浮动布局

左侧栏固定宽度向左浮动,右侧主要内容则用margin-left留出左侧栏的宽度,默认宽度为auto,自动填满剩下的宽度。

        .one{
            float: left;
            width: 200px;
            height: 200px;
            background: darkcyan
        }
        .two{
            margin-left: 200px;
            height: 200px;
            background: salmon
        }

css实现两栏布局的方法有哪些

右侧固定宽度,左侧自适应则是同理,只要将固定栏右浮动,使用margin-right空出其宽度即可。

    
        .one{
            float: right;
            width: 200px;
            height: 200px;
            background: darkcyan
        }
        .two{
            margin-right: 200px;
            height: 200px;
            background: salmon
        }

css实现两栏布局的方法有哪些

2、浮动布局+负外边距(双飞翼布局的两栏版)

        
        .aside{
            width: 300px;
            height: 100px;
            background:darkcyan;
            margin-right: -100%;
            float: left;
        }
        .main{
            width: 100%;
            float: left;
        }
        .content{
            margin-left: 300px;
            background: salmon;
        }

css实现两栏布局的方法有哪些

3、绝对定位

    
        .left{
            width: 200px;
            height: 200px;
            position: absolute;
            background: darkcyan
        }
        .right{
            height: 200px;
            margin-left:200px; 
            background: salmon;
        }

关于css实现两栏布局的方法有哪些就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


分享题目:css实现两栏布局的方法有哪些-创新互联
分享地址:http://pwwzsj.com/article/cdgpgc.html