CSS布局样式：左右布局，左边定宽，右边自适应

最新推荐文章于 2024-06-21 17:18:49 发布

Jacksoncz

最新推荐文章于 2024-06-21 17:18:49 发布

阅读量5k

点赞数 1

分类专栏： css3 文章标签： css 布局

本文链接：https://blog.csdn.net/Jacksoncz/article/details/76576902

版权

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.display：table width:100% 和 diplay : table-cell

<!DOCTYPE html>
<html>
<head>
    <title>table</title>
</head>
<style>
    #wrap{
        display: table;
        width: 100%;
        background-color: #eee;
    }
    .sidebar{
        display: table-cell;
        width: 300px;
        background-color: red;
    }
    .content{
        display: table-cell;
        background-color: pink;
    }
</style>

<body>
<div id="wrap">
    <div class="sidebar">sidebar</div>
    <div class="content">content</div>
</div>
</body>
</html>

2：float 单一层浮动法
例如：左侧固定成100px; 则核心代码左侧：width:100px;float:left; 右侧 width:auto;margin-left:100px;
实例：

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>z-index</title>  
<style type="text/css">  
    *{margin:0;padding:0;}  
    .container{height:200px;}  
    .left{width:100px;border-right:none;height:50px;float:left;background-color:yellow;}  
    .right{margin-left:100px;width:auto;height:100px;background-color:blue;}  
</style>  
</head>  
<body>  
    <div class="container">  
        <div class="left"></div>  
        <div class="right"></div>  
    </div>  
</body>  
</html>

3.定位，在固定元素上加入绝对定位，自适应元素设置成margin-left:固定元素的宽度

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>z-index</title>  
<style type="text/css">  
*{margin:0;padding:0;}  
.container{height:200px;}  
.left{width:100px;height:50px;background-color:blue;position:absolute;left:0;top:0;}  
.right{margin-left:100px;height:100px;background-color:yellow;}  
</style>  
</head>  
<body>  
    <div class="container">  
    <div class="left">left</div>  
    <div class="right">right</div>  
    </div>  
</body>  
</html>

4.左边设置左浮动，右边宽度设置100%

.left{float:left;}
.right{width:100%;}

5. 父容器设置 display：flex；Right部分设置 flex：1

.container{display:flex;}
.left{width:200px;}
.right{flex:1;}

Jacksoncz

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS布局样式：左右布局，左边定宽，右边自适应

1.display：table width:100% 和 diplay : table-cell<!DOCTYPE html><html><head> <title>table</title></head><style> #wrap{ display: table; width: 100%; background-colo
复制链接

扫一扫

专栏目录