阿里2016前端开发工程师笔试 - 布局之左侧自动宽度右侧固定宽度

最新推荐文章于 2024-05-05 21:01:18 发布

franks_t_d

最新推荐文章于 2024-05-05 21:01:18 发布

阅读量423

点赞数

分类专栏： HTML5 / CSS3 文章标签：响应式布局阿里2016前端笔试

本文链接：https://blog.csdn.net/franks_t_d/article/details/52658907

版权

HTML5 / CSS3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<div class="demo">
    <div class="container">
        <div class="content">
            <div class="content_left">左侧响应区子层1</div>
            <div class="content_right">左侧响应区子层2</div>
        </div>
    </div>
    <div class="side">右侧固定区</div>
</div>

<style>
    .demo{
        width:100%;
        height:500px;
    }
    .container{
        float: left;
        width:100%;
        height:100%;
        margin-right:-300px;
    }
    .side{
        float: right;
        width:300px;
        height:100%;
        background-color: #000;
    }
    .container .content{
        height:100%;
        margin-right: 300px;
    }
    .container .content .content_left{
        float: left;
        width:49.99%;
        height:100%;
        background-color: #f60;
    }
    .container .content .content_right{
        float: right;
        width:49.99%;
        height:100%;
        background-color: #f90;
    }
</style>