CSS布局 -- 左右定宽，中间自适应

分手后的思念是犯贱 2021-12-17 06:34 405阅读 0赞

**左右定宽，中间自适应**

![200929295746183.png][]

有几种方法可以实现

改变窗口大小看看？

**方案一：**

**左右设置绝对定位，定宽，中间设置margin-left margin-right**

查看 **[demo][]**

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>左右定宽，中间自适应(1)</title>
    <style type="text/css">
        *{
         margin: 0;padding: 0;}
        .left{
         
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            border: 1px solid #333;
            background: #aaa;
        }
        .right{
         
            position: absolute;
            top: 0;
            right: 0;
            width: 220px;
            background: #aaa;
        }
        .middle{
          
            margin-left: 200px;
            margin-right: 220px;
            border: 1px solid #333;
            background: #ccc;
            word-break: break-all;
        }
    </style>
    </head>
    <body>
        <div class="left">
        <h4>left</h4>
            <p>oooooooooooooo
            0000000000000000
            00000000000000000
            ooooooooooooooo
            ooooooooooooooo
            000000000000000</p>
        </div>
        <div class="middle">
            <h4>middle</h4>
            <p>HHHHHHHHHHHHHHHHHHHHHH
            hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
            HHHHHHHHHHHHHHHHHHHHHH
            hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
            </p>
        </div>
        <div class="right">
        <h4>right</h4>
            <p>BBBBBBBBBBBBBB
            888888888888888888
            BBBBBBBBBBBBBBBBBB
            88888888888888888888</p>
        </div>
    </body>
    </html>

**方案二：**

**采用负边距处理。**左中右都float：left;

中间的div里边再设置一个div ,外层div占满 width:100%; 内层div使用margin-left 和margin-right

左边加上负边距 margin-left:-100% 拉回最左端

右边加上负边距 margin-left:-220px (即为右边的宽度)拉回最右端

查看 **[demo][demo 1]**

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>左右定宽，中间自适应(2)</title>
    <style type="text/css">
        *{
         margin: 0;padding: 0;}
        .left{
         
            float: left;
            margin-left: -100%;
            width: 200px;
            border: 1px solid #333;
            background: #aaa;
        }
        .right{
         
            float: left;
            margin-left: -220px;
            width: 220px;
            background: #aaa;
        }
        .middle{
          
            float: left;
            width: 100%;
        }
        .middle-inner{
          
            margin-left: 200px;
            margin-right: 220px;
            border: 1px solid #333;
            background: #ccc;
            word-break: break-all;
        }
    </style>
    </head>
    <body>
        <div class="middle">
        <div class="middle-inner">
            <h4>middle</h4>
            <p>HHHHHHHHHHHHHHHHHHHHHH
            hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
            HHHHHHHHHHHHHHHHHHHHHH
            hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
            </p>
            </div>
        </div> 
        <div class="left">
        <h4>left</h4>
            <p>oooooooooooooo
            0000000000000000
            00000000000000000
            ooooooooooooooo
            ooooooooooooooo
            000000000000000</p>
        </div>
    
          <div class="right">
        <h4>right</h4>
            <p>BBBBBBBBBBBBBB
            888888888888888888
            BBBBBBBBBBBBBBBBBB
            88888888888888888888</p>
        </div>
    </body>
    </html>

**方案三：**

**左边使用float:left 右边用float:right，html代码中的中间部分要放后边**

查看 **[demo][demo 2]**

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>左右定宽，中间自适应(3)</title>
    <style type="text/css">
        *{
         margin: 0;padding: 0;}
        .left{
         
            float: left;
            width: 200px;
            border: 1px solid #333;
            background: #aaa;
        }
        .right{
         
            float: right;
            width: 220px;
            background: #aaa;
        }
        .middle{
          
            margin-left: 200px;
            margin-right: 220px;
            border: 1px solid #333;
            background: #ccc;
            word-break: break-all;
        }
    </style>
    </head>
    <body>
        <div class="left">
        <h4>left</h4>
            <p>oooooooooooooo
            0000000000000000
            00000000000000000
            ooooooooooooooo
            ooooooooooooooo
            000000000000000</p>
        </div>
        <div class="right">
        <h4>right</h4>
            <p>BBBBBBBBBBBBBB
            888888888888888888
            BBBBBBBBBBBBBBBBBB
            88888888888888888888</p>
        </div>
            <div class="middle">
            <h4>middle</h4>
            <p>HHHHHHHHHHHHHHHHHHHHHH
            hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
            HHHHHHHHHHHHHHHHHHHHHH
            hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
            </p>
        </div>
    </body>
    </html>

转载于:https://www.cnblogs.com/imwtr/p/4440997.html

[200929295746183.png]: /images/20211217/79313077d4f647c39d193388a884f080.png
[demo]: http://demoff.sinaapp.com/css_21.html
[demo 1]: http://demoff.sinaapp.com/css_22.html
[demo 2]: http://demoff.sinaapp.com/css_23.html