当前位置:Gxlcms > css > css实现两栏布局的三种方法介绍(代码)

css实现两栏布局的三种方法介绍(代码)

时间:2021-07-01 10:21:17 帮助过:49人阅读

本篇文章给大家带来的内容是关于css实现两栏布局的三种方法介绍(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

1、浮动布局

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

<div class="one"></div>
 
<div class="two"></div>
        .one{
            float: left;
            width: 200px;
            height: 200px;
            background: darkcyan
        }
        .two{
            margin-left: 200px;
            height: 200px;
            background: salmon
        }

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

    <div class="one"></div>
    <div class="two"></div>
        .one{
            float: right;
            width: 200px;
            height: 200px;
            background: darkcyan
        }
        .two{
            margin-right: 200px;
            height: 200px;
            background: salmon
        }

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

        <div class="aside"></div>
    <div class="main">
        <div class="content"></div>
    </div>
        .aside{
            width: 300px;
            height: 100px;
            background:darkcyan;
            margin-right: -100%;
            float: left;
        }
        .main{
            width: 100%;
            float: left;
        }
        .content{
            margin-left: 300px;
            background: salmon;
        }

3、绝对定位

    <div class="left"></div>
    <div class="right"></div>
        .left{
            width: 200px;
            height: 200px;
            position: absolute;
            background: darkcyan
        }
        .right{
            height: 200px;
            margin-left:200px; 
            background: salmon;
        }

相关推荐:

Css布局系列-上下两栏布局_html/css_WEB-ITnose

CSS:三栏布局,两边固定,中间自适应_html/css_WEB-ITnose

css 多栏自适应布局_html/css_WEB-ITnose

以上就是css实现两栏布局的三种方法介绍(代码)的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行