css左边固定，右边自适应

最新推荐文章于 2023-08-13 09:34:53 发布

安小漠HG

最新推荐文章于 2023-08-13 09:34:53 发布

阅读量2.4k

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/anxiaomo1/article/details/59619920

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

css左边固定，右边自适应

HTML页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

css

方法1：
左边div使用float:left;

<style>
       .left{
             float: left;
             width: 500px;
             height: 500px;
             background: red;
         }
         .right{
             height: 200px;
             background: #FF6633;
             overflow:auto;
         }
</style>

方法2：将外部容器div设置display:flex，flex-direction: row，将项目水平显示，正如一个行一样。并且将右边div设置flex:1,自适应宽度

<style>
      .container{
            display: -webkit-flex; !* Safari *!
            -webkit-flex-direction: row-reverse; !* Safari 6.1+ *!
            display: flex;
            flex-direction: row;

        }
        .left{
            background: red;
            width: 500px;
            height: 500px;
        }
        .right{
            flex:1;
            background: #FF6633;
            height: 200px;
        }
</style>

方法3：首先设置左边容器的宽度，和float值，然后设置右边容器的margin-left为左边容器的宽度

<style>
        .container{
            overflow: hidden; 
            *zoom: 1;
        }
        .left{
            float: left;
            background: red;
            width: 500px;
            height: 500px;
        }
        .right{
            background: #FF6633;
            margin-left: 500px;
            height: 200px;
        }
</style>

方法4：让左边容器脱离文档流，设置右边容器的margin-left为左边容器的宽度

<style>
        .container {
            *zoom: 1;
            position: relative;
        }
        .left {
            position: absolute;
            background: red;
            width: 500px;
            height: 500px;
            left: 0;
            top: 0;
        }
        .right {
            margin-left: 310px;
            background: #FF6633;
            height: 200px;
        }
</style>

方法5：将外部容器的display设置为table型，左右两边容器设置为table-cell型，但是这样的话会使左边和右边容器同高。

<style>
       .container {
            display: table;
            width: 100%;
        }
        .left {
            display: table-cell;
            background: red;
            width: 500px;
            height: 500px;
        }
        .right {
            display: table-cell;
            background: #FF6633;
        }
</style>

安小漠HG

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css左边固定，右边自适应

css左边固定，右边自适应HTML页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body><div class="container"> <div class="left"></div> <div class="right"></di
复制链接

扫一扫

专栏目录