圣杯布局

发布时间:2020-07-11 10:59:09 作者:鲁城铭
来源:网络 阅读:464

<span ></span>圣<pre class="brush:html;toolbar:false"><br/></pre>杯布局

《圣杯布局》:

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>圣杯布局</title>

    <style type="text/css">

        * { margin: 0; padding: 0; }

        .left, .middle, .right { position: relative; float: left; min-height: 130px;}

        .container { padding: 0 220px 0 200px; overflow: hidden; }

        .left { margin-left: -100%; left: -200px; width: 200px; background: red; }

        .right { margin-left: -220px; right: -220px; width: 220px; background: green; }

        .middle { width: 100%; background: blue; word-break: break-all; }

    </style>

</head>

<body>

    <div class="container">

        <div class="middle">中间</div>

        <div class="left">左面</div>

        <div class="right">右面</div>

    </div>

</body>

</html>

推荐阅读:
  1. 自动机器学习:它是圣杯吗?
  2. 关于Flex 布局。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

圣杯布局

上一篇:Bootstrap pc pad phone 响应式布局

下一篇:API 管理或定制如何开发 ECS

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》