风华正茂、时光流逝、真爱时光、努力创建辉煌。

【html】---布局----三列 局------四种布局方式 

一、中间定宽、左、右侧百分比自适应：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #left,
        #right {
            float: left;
            width: 50%;
            margin: 0 0 0 -150px;
            height: 200px;
        }

        #middle {
            float: left;
            width: 300px;
            background: #CCC;
            height: 200px;
        }

        #innerLeft,
        #innerRight {
            margin: 0 0 0 150px;
            background: #EFEFEF;
        }
    </style>
</head>

<body>
    <div id="left">
        <div id="innerLeft">
            <p>div三列布局的左列</p>
        </div>
    </div>
    <div id="middle">
        <div id="innerMiddle">
            <p>div三列布局的中列</p>
        </div>
    </div>
    <div id="right">
        <div id="innerRight">
            <p>div三列布局的右列</p>
        </div>
    </div>

</body>

</html>

 

 

 

二、左侧定宽，中、右侧百分比自适应：

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #left {
            float: left;
            width: 300px;
            margin: 10px 10px 0 0;
        }

        #rightContent {
            margin-left: 300px;
        }

        #middle {
            float: left;
            width: 50%;
        }

        #right {
            float: left;
            width: 50%;
        }
    </style>
</head>

<body>
        <div id="left">
                <div id="innerLeft">
                    <p>div三列布局的左列</p>
                </div>
            </div>
            <div id="rightContent">
                <div id="middle">
                    <div id="innerMiddle">
                        <p>div三列布局的中列</p>
                    </div>
                </div>
                <div id="right">
                    <div id="innerRight">
                        <p>div三列布局的右列</p>
                    </div>
                </div>
            </div>

</body>

</html>

 

 

 

 

 三、左、右侧定宽，中间百分比自适应：

 

 

1、HTML代码：

复制代码
<div id="left">
    <div id="innerLeft">
        <p>div三列布局的左列</p>
    </div>
</div>
<div id="middle">
    <div id="innerMiddle">
        <p>div三列布局的中列</p>
    </div>
</div>
<div id="right">
    <div id="innerRight">
        <p>div三列布局的右列</p>
    </div>
</div>
复制代码

　　2、CSS代码：

复制代码
#left {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
}

#middle {
    height: 200px;
    margin-left: 200px;
    margin-right: 200px;
}

#right {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
}
复制代码

 

四、左、中定宽，右侧百分比自适应：

 

　　1、HTML代码：

复制代码
<div id="leftContent">
    <div id="left">
        <div id="innerLeft">
            <p>div三列布局的左列</p>
        </div>
    </div>
    <div id="middle">
        <div id="innerMiddle">
            <p>div三列布局的中列</p>
        </div>
    </div>
</div>
<div id="right">
    <div id="innerRight">
        <p>div三列布局的右列</p>
    </div>
</div>
复制代码

 　　2、CSS代码：

复制代码
#leftContent {
    float: left;    
    width: 500px;
    height: 200px;
    background: #CCC;
}

#left,
#middle {
    float: left;
    width: 50%;
}

#right {
    margin-left: 500px;
    height: 200px;
}

 

posted @ 2019-08-15 23:23  野马,程序源改造新Bug  阅读(174)  评论(0)    收藏  举报