左边定宽，右边自适应

最新推荐文章于 2020-07-23 18:56:18 发布

源辰_付

最新推荐文章于 2020-07-23 18:56:18 发布

阅读量487

点赞数 1

分类专栏：前端

前端专栏收录该内容

154 篇文章 2 订阅

订阅专栏

1.左边浮动，右边设置margin
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .container{
            overflow: hidden;/* 清浮动*/
        }
        .left {
            float: left;/*左浮动，脱离文档流*/
            width: 200px;
            height: 100px;
            border: 10px solid green;
        }
        .right {
            margin-left: 220px;/*左边的margin*/
            height: 100px;
            border: 10px solid gold;
            word-break: break-all; /*强制让内容换行*/
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left"></div>
    <div class="right">111111111111111111111111111111111111111111</div>
</div>
</body>
</html>

2、左边绝对定位，右边设置margin-left
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .left {
            position: absolute;/*左绝对定位，脱离文档流*/
            width: 200px;
            height: 100px;
            border: 10px solid green;
        }

        .right {
            margin-left: 220px;/*左边的margin*/
            height: 100px;
            border: 10px solid gold;
            word-break: break-all; /*强制让内容换行*/
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left"></div>
    <div class="right">1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
</div>
</body>
</html>

3、左边脱离文档流，右边overflow:hidden
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .left {
            float: left;/*左浮动、或者绝对定位*/
            width: 200px;
            height: 100px;
            border: 10px solid green;
        }

        .right {
            overflow: hidden;
            height: 100px;
            border: 10px solid gold;
            word-break: break-all; /*强制让内容换行*/
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left"></div>
    <div class="right">1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
</div>
</body>
</html>

4.flex布局
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container{
            display: flex;/*容器内的内容自动横向排列*/
        }
        .left {
            width: 200px;
            height: 100px;
            border: 10px solid green;
        }

        .right {
            flex: 1;/*剩余的部分默认填满*/
            height: 100px;
            border: 10px solid gold;
            word-break: break-all; /*强制让内容换行*/
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left"></div>
    <div class="right">1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
</div>
</body>
</html>