css实现两栏自适应布局

来源：互联网发布：js视频弹窗代码编辑：程序博客网时间：2024/06/01 10:00

前端经典的两栏布局

示例代码：点此下载

1、左侧定宽，左浮动；右侧宽度100%;

!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="css/index.css" /></head><body><div class="left"></div><div class="right">两栏布局；左侧定宽左浮动，右侧宽度100%</div></body></html>

.left{    float: left;    width: 200px;    height: 400px;    background: red;}.right{    width: 100%;    height: 400px;    background: green;}

2、使用弹性布局，父元素display: flex，左侧定宽，右侧flex:1，占满容器宽度

body{    display: flex;    flex-direction: row;}.left{    width: 200px;    height: 400px;    background: red;}.right{    flex: 1;    height: 400px;    background: green;}

3、父元素相对定位，左侧定宽，右侧绝对定位。

body{    position: relative;}.left{    width: 200px;    height: 400px;    background: red;}.right{    position: absolute;    top: 0px;    left:200px;    right: 0px;    height: 400px;    background: green;}

4、左侧定宽，左浮动，右侧overflow:auto

.left{    float: left;    width: 100px;    height: 200px;    background: red;}.right{    height: 200px;    background: green;    overflow: auto;}

5、html中左侧元素放在右侧元素后面，右侧：父元素content宽度100%，右浮动，自己左边距200px；左侧：右浮动，右边距-200px

!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><link rel="stylesheet" href="css/index5.css" /></head><body><div class="content"><div class="right"></div></div><div class="left"></div></body></html>

.content{    float: right;    width: 100%;    height: 400px;}.right{    height: 400px;    background: red;    margin-left: 200px;}.left{    float: right;    width:200px;    height: 400px;    background: green;    margin-right: -200px;}

阅读全文

0 0