三栏布局（三列布局）

最新推荐文章于 2022-08-06 12:13:59 发布

政旻

最新推荐文章于 2022-08-06 12:13:59 发布

阅读量406

点赞数 1

分类专栏：知识点文章标签：布局

本文链接：https://blog.csdn.net/qq_27263045/article/details/77119373

版权

知识点专栏收录该内容

14 篇文章 1 订阅

订阅专栏

1.三列布局

1.1自身浮动法

此代码较简单，左栏左浮动，右栏右浮动，主栏内容放在最后，用margin 值为左右的宽度来实现自适应

==注意:不浮动的元素要放在浮动元素后面==

代码如下：

<head>
<style type="text/css">
body{
    padding:0;
    margin:0;
}
.left{
    width:100px;
    height:200px;
    background-color:yellow;
    float:left;
}

.middle{
    height:300px;
    background-color:red;
    margin:0 200px 0 100px;
}

.right{
    width:200px;
    height:200px;
    background-color:blue;
    float:right;
}
</style>
</head>

<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle"></div><!--中间的一定要放在浮动元素之后-->
</body>

1.2绝对定位法

此方法与自身浮动法相似，但是使用的是绝对定位，左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主题栏采用左右的margin值来撑开距离

注意:采用浮动的方法时，浮动元素本身会占据其位置（对不浮动的元素来说，都浮动的元素不占据位置，此处需理解文档流和浮动流），后面不浮动的元素跟随在后，但是绝对布局不会占据位置，后面的内容会被覆盖

代码如下：

<style type="text/css">
body{
    padding:0;
    margin:0;
}
.left{
    width:100px;
    height:200px;
    position:absolute;
    background-color:yellow;
    left:0;
    top:0;
}

.middle{
    height:200px;
    background-color:red;
    margin:0 200px 0 100px;
}

.right{
    width:200px;
    height:200px;
    position:absolute;
    background-color:blue;
    right:0;
    top:0;
}
</style>
</head>

<body>
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</body>

1.3margin负值法

中间的主体使用双层标签，外层内容div宽度100%显示，并且浮动，内层div为真正的主体内容，左栏与右栏采用margin负值定位，左栏左浮动,margin-left值为-100%,右栏也为左浮动，其margin-left值为本身宽度值

==原理：==

主体内容浮动占据100%的位置，后面的元素依次浮动，然后使用margin相应的值来将其调整到本来的位置

<style type="text/css">
body{
    padding:0;
    margin:0;
}
.left,.right{
    width:200px;
    height:200px;
    float:left;
    background-color:yellow;
}

.middleMain{
    float:left;
    width:100%;/*让主体父级div全屏显示，通过%，随屏幕变化*/
}

.middle{
    margin:0 210px;/* 通过margin值而不是width，设置主体的宽度，实现自适应 */
    height:200px;
    background-color:red;
}

.left{
     /* 当使用margin左负值，超过自身的宽度时，这个元素在第一行就有位置了。而margin的负值达到-100%时，恰能达到窗口最左侧 */
    margin-left:-100%;
}

.right{
    /* 当使用margin左负值，超过自身的宽度时，这个元素在第一行就有位置了。*/
    margin-left:-200px;
}
</style>
</head>

<body>
    <div class="middleMain">
        <div class="middle">Main</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</body>

注意：几个div的顺序，无论是左浮动还是右浮动，先是主体部分div，这是肯定的，至于左右两栏谁先谁后，都无所谓。测试后，效果达到了。

此方法的优点：三栏相互关联，可谓真正意义上的自适应，有一定的抗性——布局不易受内部影响。
缺点在于：相对比较难理解些，上手不容易，代码相对复杂。出现百分比宽度，过多的负值定位，如果出现布局的bug，排查不易。