前端知识收集-css常用布局及练习部分

说明

前半部分为常用布局实现，包括双飞翼，圣杯，flex
后半部分为布局练习

常用布局实现

• 双飞翼布局

常用的三列布局之一，左列右列宽度固定，中列宽度自适应。
demo地址：http://codepen.io/zld13455/pen/wzzwLa

//html部分
<div class="main-container">
    <div class="main">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>

//css部分
.main-container {
    float: left;
    width: 100%;
    height: 500px;
}
.main {
    height: 500px;
    background-color: aqua;
    margin-left: 200px;
    margin-right: 200px;
}
.left {
    float: left;
    width: 200px;
    height: 500px;
    margin-left: -100%;
    background-color: red;
}
.right {
    float: left;
    width: 200px;
    height: 500px;
    margin-left: -200px;
    background-color: blue;
}

• 圣杯布局

常用的三列布局之一，左列右列宽度固定，中列宽度自适应。
demo地址：http://codepen.io/zld13455/pen/JRRjoa

//html部分
<div class="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

//css部分
.container {
    width：100%;
    height: 300px;
    padding-left: 200px;
    padding-right: 200px;
}
.main {
    float: left;
    width: 100%;
    height: 300px;
    background-color: aqua;
}
.left {
    position: relative;
    left: -200px;
    margin-left: -100%;
    float: left;
    width: 200px;
    height: 300px;
    background-color: red;
}
.right {
    position: relative;
    right: -200px;
    margin-left: -200px;
    float: left;
    width: 200px;
    height: 300px;
    background-color: blue;
}

布局练习

• 不设定A容器和B容器的宽度，使得C容器里面的A和B元素分栏

1. 使用absolute

.c {
    width: 500px;
    height: 500px;
    position: relative;
}
.a {
    width: 100%;
    height: 100%;
    background-color: red;
}
.b   {
    position: absolute;
    left:300px;
    top:0px;
    right: 0;
    height: 100%;
    background-color: blue;
}