多栏自适应布局

Posted 学如逆水行舟,不进则退。

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了多栏自适应布局相关的知识,希望对你有一定的参考价值。

一、两栏自适应,左右栏高度均200px, 左栏宽度自适应,右栏宽度200px

<!--html代码-->
    <div class="right"></div>
    <div class="left"></div>

 

* {
    margin: 0;
    padding: 0;

}
/*方案一*/
.right {
    width: 200px;
    height: 200px;
    background-color: orange;
    float: right;
}

.left {
    height: 200px;
    background-color: lawngreen;
    margin-right: 200px;
}
/*方案二*/
.right {
    width: 200px;
    height: 200px;
    background-color: orange;
    position: absolute;
    right: 0;
}
.left {
    height: 200px;
    background-color: lawngreen;
    margin-right: 200px;
}

 

二、三栏自适应布局,三栏高度均为200px,左右栏宽度均200px,中间一栏宽度自适应

 <!--html代码-->
    <div class="right"></div>
    <div class="left"></div>
    <div class="center"></div>

 

 

.right, .left, .center {
    height: 200px;
}
.right, .left {
    width: 200px;
    position: absolute;
}
.right {
    right: 0;
    background-color: red;
}
.left {
    left: 0;
    background-color: green;
}
.center {
    background-color: #000;
    margin-left: 200px;
    margin-right: 200px;
}

 

总结:

  1.html代码中自适应的div必须要放到最后写

  2.css代码中通过绝对定位来固定左右,剩下的位置为自适应的div;

  3.css代码中自适应的div要设置margin-left或margin-right来为固定的div空出位置

 

以上是关于多栏自适应布局的主要内容,如果未能解决你的问题,请参考以下文章

两栏自适应布局

两栏三栏自适应布局

常见布局:左栏固定右栏自适应

两栏自适应布局--溢出省略

布局中的BFC---重点是前言

利用BFC特性实现两栏自适应