前段面试题：写一个左中右布局占满屏幕，其中左右两块是固定宽度200 ，中间自适应宽。

最新推荐文章于 2022-02-19 08:29:24 发布

陌上烟雨寒

最新推荐文章于 2022-02-19 08:29:24 发布

阅读量437

点赞数 1

文章标签： html css 面试

本文链接：https://blog.csdn.net/weixin_47180815/article/details/106603227

版权

最近又看到这样一道面试题：
写一个左中右布局占满屏幕，其中左右两块是固定宽度200 ，中间自适应宽，要求先加载中间块，请写出结构及样式：

给出的答案：

 <body>  
        <h3>实现三列宽度自适应布局</h3>  
        <div id = "left">我是左边</div>  
        <div id = "right">我是右边</div>  
        <div id = "center">我是中间</div>  
</body>  
html,body{ margin: 0px;width: 100%; }  
h3{height: 100px;margin:20px 0 0;}  
#left,#right{width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;top:120px;}  
#left{left:0px;}  
#right{right: 0px;}  
#center{margin:2px 210px ;background-color: #eee;height: 200px; }

运行的结果

看了答案，觉得方法有点和自己的想法不太一样，这里我来介绍我的两种解决方案：

效果图
在这里插入图片描述

方法一（利用浮动实现）

注意
利用浮动时需要将 center 盒子放在最后，通过overflow：hidden 清除浮动

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }

        .left {
            width: 100px;
            background-color: rgb(199, 170, 223);
            float: left;
            height: 100%;
        }

        .center {
            background-color: rgb(151, 228, 148);
            overflow: hidden;
            height: 100%;
        }

        .right {
            width: 100px;
            background-color: rgb(199, 170, 223);
            float: right;
            height: 100%;
        }
    </style>


<body>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</body>

方法二（利用弹性盒实现）

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }

        body {
            display: flex;
        }

        .left {
            width: 100px;
            background-color: rgb(199, 170, 223);
        }

        .center {
            background-color: rgb(151, 228, 148);
            flex: 1;
        }

        .right {
            width: 100px;
            background-color: rgb(199, 170, 223);


        }
    </style>

<body>
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
</body>

陌上烟雨寒

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前段面试题：写一个左中右布局占满屏幕，其中左右两块是固定宽度200 ，中间自适应宽。

最近又看到这样一道面试题：写一个左中右布局占满屏幕，其中左右两块是固定宽度200 ，中间自适应宽，要求先加载中间块，请写出结构及样式：给出的答案： <body> <h3>实现三列宽度自适应布局</h3> <div id = "left">我是左边</div> <div id = "right">我是右边</div> <div id
复制链接

扫一扫