css实现两栏自适应布局

最新推荐文章于 2024-05-07 12:23:02 发布

兰亭古墨

最新推荐文章于 2024-05-07 12:23:02 发布

阅读量1.1k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/hefeng6500/article/details/78465043

版权

CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

前端经典的两栏布局

示例代码：点此下载

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
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css实现两栏自适应布局

前端经典的两栏布局1、左侧定宽，左浮动；右侧宽度100%; 两栏布局；左侧定宽左浮动，右侧宽度100% .left{ float: left; width: 200px; height: 400px; background: red;}.right{ width: 100%; he
复制链接

扫一扫

专栏目录