CSS双飞翼布局

此CSS是为了实现三列布局：左右固定，中间自适应；且浏览器会自上而下先出现中间部分。

html:

<body>
<!-- 使得浏览器先出来center -->
<div class="box">
    <div class="center">
        <!-- 创建一个div 开造 -->
        <div class="inner"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>

</body>

CSS:

<style>
    .box {
        width: 100%;
        height: 300px;
        background: darkblue;
        margin: 0 auto;
    }

    .center {
        width: 100%;
        height: 100%;
        float: left;
    }

    .inner {
        /* width: 100px;
        height: 100%;
        background: darkmagenta; */
        margin: 0;
    }

    .left {
        width: 100px;
        height: 100%;
        background: darkgoldenrod;
        float: left;
        margin-left: -100%;
    }

    .right {
        width: 100px;
        height: 100%;
        background: darkred;
        float: left;
        margin-left: -100px;
    }
</style>

最后效果出来是这样的
此处输入图片的描述

据说认真阅读并点赞的你，代码敲的最6哦~ 有兴趣的小伙伴可以加我微信，一起讨论；V-x: dandanshen987

CSS双飞翼布局

有一天，当你明白"小白" +"勤奋"的时候，你就会成为大牛

安逸

引用和评论

nrm 安装与配置

网页设计的垂直居中

CSS团队协作规范

前端开发工具

CSS 现在终于支持高度 auto 过渡动画了

纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

Jerry和您聊聊Chrome开发者工具