双飞翼布局

最新推荐文章于 2022-12-29 23:01:32 发布

LPLIFE

最新推荐文章于 2022-12-29 23:01:32 发布

阅读量272

点赞数

分类专栏： HTML css

本文链接：https://blog.csdn.net/LPLIFE/article/details/81952933

版权

css 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

HTML

7 篇文章 0 订阅

订阅专栏

双飞翼布局: 两边定宽,中间自适应(随着屏幕宽度的大小而改变),

如下图:

贴上代码:

<!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">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <title>双飞翼布局</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .sub,
        .main,
        .extra {
            float: left;
            min-height: 30px;
        }

        .sub {
            margin-left: -100%;
            width: 100px;
            background: red;
            position: relative;
        }

        .extra {
            margin-left: -120px;
            width: 120px;
            background: blue;
            position: relative;
        }

        .main {
            width: 100%;
        }

        .main-inner {
            margin-left: 105px;
            margin-right: 125px;
            min-height: 30px;
            background: green;
            word-break: break-all;
            position: relative;
        }

        .dd,
        .progress,
        .cc {
            margin: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        .progress {

            height: 5px;
            background-color: fuchsia;
            width: 100%;
        }
    </style>
</head>

<body>

    <div class="main">
        <div class="main-inner">
            <div class="progress">
            </div>
        </div>
    </div>
    <div class="sub">
        <div class="dd">
            <span class="glyphicon glyphicon-fast-backward"></span>
            <span class="glyphicon glyphicon-play"></span>
            <span class="glyphicon glyphicon-fast-forward"></span>
        </div>
    </div>
    <div class="extra">
        <div class="cc">
            <select>
                <option value="">1</option>
                <option value="">2</option>
                <option value="">3</option>
            </select>
            <span class=" glyphicon glyphicon-retweet"></span>
        </div>
    </div>

</body>

</html>