博主微信:jiayou321xiaoyu 加微信,备注:前端Tree

五种左右固定中间自适应布局面试考点

HTML5+CSS3 admin 179℃ 0评论
<!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>左右固定中间自适应</title>
</head>
<body>
    <!– 浮动 –>
    <!–
    author : Sir wangyahao
    Author URI:http://www.xrmseo.com
    copyright by VTHINK: http://www.vthinks.net/
    –>
    <style>
        .wrap1{
            width: 100%;
            height: 300px;
            background-color: red;
        }
        .wrap1 .left {
            width: 300px;
            height: 100%;
            background-color: sandybrown;
            float: left;
        }
        .wrap1 .right {
            width: 300px;
            background-color: rgb(97, 86, 250);
            float: right;
            height: 100%;
        }
        .wrap1 .center {
            height: 100%;
        }
    </style>
    <div class=”wrap1″>
        <div class=”left”></div>
        <div class=”right”></div>
        <div class=”center”>
            <h1>浮动左右固定 ,中间居中</h1>
            <p>我是居中的我是居中的我是居中的我是居中的我是居中的我是居中的我是居中的我是居中的</p>
        </div>
    </div>
    <!–定位  –>
    <style>
        .wrap2{
            position: relative;
            width: 100%;
            height: 300px;
            background-color: rgb(60, 173, 50);
        }
        .wrap2 .left {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 300px;
            height: 300px;
            background-color: rgb(137, 30, 156);
            float: left;
        }
        .wrap2 .right {
            position: absolute;
            top: 0px;
            right: 0px;
            width: 300px;
            background-color: rgb(250, 239, 86);
            float: right;
            height: 300px;
        }
        .wrap2 .center {
            height: 300px;
            position: absolute;
            top: 0px;
            left: 300px;
            right: 300px;
        }
    </style>
    <div class=”wrap2″>
        <div class=”left”></div>
        <div class=”right”></div>
        <div class=”center”>
            <h1>浮动左右固定 ,中间居中</h1>
            <p>我是居中的我是居中的我是居中的我是居中的我是居中的我是居中的我是居中的我是居中的</p>
        </div>
    </div>
    <!–flex  –>
    <style>
        .wrap3{
            width: 100%;
            height: 300px;
            background-color: red;
            display: flex;
            justify-content:space-around;
        }
        .wrap3 .left {
            width: 300px;
            height: 300px;
            background-color: rgb(239, 96, 244);
        }
        .wrap3 .right {
            width: 300px;
            height: 300px;
            background-color: rgb(81, 75, 156);
        }
        .wrap3 .center {
            flex : 1;
            height: 300px;
            background-color: slateblue;
        }
    </style>
    <div class=”wrap3″>
        <div class=”left”>
        </div>
        <div class=”center”>
            <h1>浮动左右固定 ,中间居中</h1>
            <p>我是居中的我是居中的我是居中的我是居中的我是居中的我是居中的我是居中的我是居中的</p>
        </div>
        <div class=”right”>
        </div>
    </div>
    <!–table  –>
    <style>
            .wrap4{
                width: 100%;
                height: 300px;
                background-color: red;
                display: table;
                justify-content:space-around;
            }
            .wrap4 .left {
                width: 300px;
                height: 300px;
                background-color: rgb(244, 96, 103);
                display: table-cell;
            }
            .wrap4 .right {
                width: 300px;
                height: 300px;
                background-color: rgb(7, 3, 70);
                display: table-cell;
            }
            .wrap4 .center {
                height: 300px;
                background-color: rgb(126, 205, 90);
                display: table-cell;
            }
        </style>
        <div class=”wrap4″>
            <div class=”left”>
            </div>
            <div class=”center”>
                <h1>浮动左右固定 ,中间居中</h1>
                <p>我是居中的我是居中的我是居中的我是居中的我是居中的我是居中的我是居中的我是居中的</p>
            </div>
            <div class=”right”>
            </div>
        </div>
    <!–grid  –>
        <style>
            .grid {
                display: grid;
                grid-template-columns:300px  auto 300px;
                grid-template-rows:300px;
            }
            .grid div {
                background-color: springgreen;
            }
            .grid div:nth-child(1) {
                background-color: rgb(90, 226, 78);
            }
            .grid div:nth-child(2) {
                background-color: rgb(167, 98, 98);
            }
            .grid div:nth-child(3) {
                background-color: rgb(228, 110, 42);
            }
        </style>
    <div class=”grid”>
        <div><p>1</p></div>
        <div>
                <h1>浮动左右固定 ,中间居中</h1>
            <p>
            我是居中的我是居中的我是居中的我是居中的我是居中的我是居中的我是居中的我是居中的</p></div>
        <div><p>3</p></div>
    </div>
</body>
</html>

转载请注明:前端Tree » 五种左右固定中间自适应布局面试考点

喜欢 (1)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址