三栏布局一般指的是页面中一共有三栏,左右两栏宽度固定,中间自适应的布局,三栏布局的具体实现:
- .outer {
- position: relative;
- height: 100px;
- }
-
- .left {
- position: absolute;
- width: 100px;
- height: 100px;
- background: tomato;
- }
-
- .right {
- position: absolute;
- top: 0;
- right: 0;
- width: 200px;
- height: 100px;
- background: gold;
- }
-
- .center {
- margin-left: 100px;
- margin-right: 200px;
- height: 100px;
- background: lightgreen;
- }
- .outer {
- display: flex;
- height: 100px;
- }
-
- .left {
- width: 100px;
- background: tomato;
- }
-
- .right {
- width: 100px;
- background: gold;
- }
-
- .center {
- flex: 1;
- background: lightgreen;
- }
- .outer {
- height: 100px;
- }
-
- .left {
- float: left;
- width: 100px;
- height: 100px;
- background: tomato;
- }
-
- .right {
- float: right;
- width: 200px;
- height: 100px;
- background: gold;
- }
-
- .center {
- height: 100px;
- margin-left: 100px;
- margin-right: 200px;
- background: lightgreen;
- }
- .outer {
- height: 100px;
- padding-left: 100px;
- padding-right: 200px;
- }
-
- .left {
- position: relative;
- left: -100px;
-
- float: left;
- margin-left: -100%;
-
- width: 100px;
- height: 100px;
- background: tomato;
- }
-
- .right {
- position: relative;
- left: 200px;
-
- float: right;
- margin-left: -200px;
-
- width: 200px;
- height: 100px;
- background: gold;
- }
-
- .center {
- float: left;
-
- width: 100%;
- height: 100px;
- background: lightgreen;
- }
- .outer {
- height: 100px;
- }
-
- .left {
- float: left;
- margin-left: -100%;
-
- width: 100px;
- height: 100px;
- background: tomato;
- }
-
- .right {
- float: left;
- margin-left: -200px;
-
- width: 200px;
- height: 100px;
- background: gold;
- }
-
- .wrapper {
- float: left;
-
- width: 100%;
- height: 100px;
- background: lightgreen;
- }
-
- .center {
- margin-left: 100px;
- margin-right: 200px;
- height: 100px;
- }