CSS布局实例--两栏布局

最新推荐文章于 2024-07-12 08:49:29 发布

lhl891111

最新推荐文章于 2024-07-12 08:49:29 发布

阅读量179

点赞数

分类专栏：前端 CSS 文章标签： css

本文链接：https://blog.csdn.net/u012149906/article/details/98942063

版权

前端同时被 2 个专栏收录

83 篇文章 0 订阅

订阅专栏

CSS

8 篇文章 0 订阅

订阅专栏

（1）两栏布局--左侧固定，右侧不固定（自适应）

①float+margin-left

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>两栏布局测试--左侧固定，右侧自适应 float+margin-left</title>
<style>
 
.left{

    background:black;

    width:200px;

    float:left;

    height:100vh;
}

    .right{

    background:orange;

    margin-left:200px;
	
    height:100vh;

}
</style>
</head>

 
 
<body>
    <div class="content">

        <div class="left" style="color:black"></div>

        <div class="right" style="color:orange"></div>

    </div>
</body>
</html>

法②：absolute

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>两栏布局--左侧固定，右侧自适应 absolute</title>
<style>
.content{
    position:relative;
    width:100%;
    height:300px;
    border:1px solid #000;
}
.left{
    background:black;
    width:200px;
    position:absolute;
}
.right{
    background:orange;
    position:abosulte;
    left:200px;
    right:0;
}

</style>
</head>

<body>

<div class="content">

    <div class="left"></div>

    <div class="right"></div>

</div>
</body>
</html>

法③：flex布局

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>两栏布局--两栏按照比例 flex布局</title>
<style>
         .max{display: flex;width: 100%;height: 100vh;}
    .left{flex:3;height:100%;background: red;}
    .right{flex:7;height: 100%;background: blue;}

</style>
</head>

<body>


        <div class="max">
    <div class="left"></div>
    <div class="right"></div>
    </div>
</body>
</html>

法④：table布局

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>两栏布局--两栏按照比例 table布局</title>
<style>
        .box{display: table;width:100%}
        .box div{
			
            display: table-cell;
			height:100vh;
        }
        .left{
           min-width:200px;
            background-color:pink;
        }
        .right{
            width:100%;
            background-color:yellow;
        }
    </style>
	<body>
    <div class="box">
        <div class="left"></div>
        <div class="right">
            
        </div>
    </div>
</body>
</html>

lhl891111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS布局实例--两栏布局

（1）两栏布局--左侧固定，右侧不固定（自适应）①float+margin-left<!DOCTYPE html><html><head><meta charset="utf-8"><title>两栏布局测试--左侧固定，右侧自适应 float+margin-left</title><style&gt...
复制链接

扫一扫

专栏目录