假设高度已知，请写出三栏布局，其中左栏、右栏各为300px，中间自适应的五种方法

HTML CSS 页面布局

题目：假设高度已知，请写出三栏布局，其中左栏、右栏各为300px，中间自适应

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

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

    <title>Layout</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style media="screen">

        html * {

            padding: 0;

            margin: 0;

        }

        .layout {

            margin-top: 20px;

        }

        .layout article div {

            min-height: 100px;

        }

    </style>

</head>

<body>

    <section class="layout float">

        <style media="screen">

            .layout.float .left {

                float: left;

                width: 300px;

                background: red;

            }

            .layout.float .right {

                float: right;

                width: 300px;

                background: blue;

            }

            .layout.float .center {

                background: yellow;

            }

        </style>

        <!-- 浮动解决方案 -->

        <article class="left-right-center">

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

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

            <div class="center">

                <h1>浮动解决方案</h1>

                1.这是三栏布局的中间部分 2.这是三栏布局的中间部分

            </div>

        </article>

    </section>

    <!-- 绝对定位解决方案 -->

    <section class="layout absolute">

        <style>

            .layout.absolute .left-center-right>div {

                position: absolute;

            }

            .layout.absolute .left {

                left: 0;

                width: 300px;

                background: red;

            }

            .layout.absolute .center {

                left: 300px;

                right: 300px;

                background: yellow;

            }

            .layout.absolute .right {

                right: 0px;

                width: 300px;

                background: blue;

            }

        </style>

        <article class="left-center-right">

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

            <div class="center">

                <h2>绝对定位解决方案</h2>

                1.这是三栏布局绝对定位中间部分 2.这是三栏布局绝对定位中间部分

            </div>

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

        </article>

    </section>

    <!-- flexbox解决方案 -->

    <section class="layout flexbox">

        <style>

            .layout.flexbox {

                margin-top: 140px;

            }

            .layout.flexbox .left-center-right {

                display: flex;

            }

            .layout.flexbox .left {

                width: 300px;

                background: red;

            }

            .layout.flexbox .center {

                /* flex: 1;占满剩余空间 */

                background: yellow;

            }

            .layout.flexbox .right {

                width: 300px;

                background: blue;

            }

        </style>

        <article class="left-center-right">

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

            <div class="center">

                <h2>flexbox解决方案</h2>

                1.这是三栏布局flex中间部分 2.这是三栏布局flex中间部分

            </div>

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

        </article>

    </section>

    <!-- 表格布局解决方案 -->

    <section class="layout table">

        <style>

            .layout.table .left-center-right {

                width: 100%;

                display: table;

                height: 100px;

            }

            .layout.table .left-center-right>div {

                display: table-cell;

            }

            .layout.table .left {

                width: 300px;

                background: red;

            }

            .layout.table .center {

                background: yellow;

            }

            .layout.table .right {

                width: 300px;

                background: blue;

            }

        </style>

        <article class="left-center-right">

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

            <div class="center">

                <h2>表格布局</h2>

                1.这是三栏布局表格布局的中间部分 2.这是三栏布局表格布局的中间部分

            </div>

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

        </article>

    </section>

    <!-- 网格布局 -->

    <section class="layout grid">

        <style>

            .layout.grid .left-center-right {

                display: grid;

                width: 100%;

                grid-template-rows: 100px;

                grid-template-columns: 300px auto 300px;

            }

            .layout.grid .left {

                background: red;

            }

            .layout.grid .center {

                background: yellow;

            }

            .layout.grid .right {

                background: blue;

            }

        </style>

        <article class="left-center-right">

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

            <div class="center">

                <h2>网格布局解决方案</h2>

                1.这是三栏布局网格布局的中间部分 2.这是三栏布局网格布局的中间部分

            </div>

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

        </article>

    </section>

</body>

</html>

假设高度已知，请写出三栏布局，其中左栏、右栏各为300px，中间自适应的五种方法的更多相关文章

  1. css中，在高度已知，写出三栏布局，其中左栏、右栏宽度各位300px，中间自适应

    解决方案主要有五种 首先写入全局样式 <style type="text/css"> html * { margin: ; padding: ; } .layout { ...

  2. 前端一面/面试常考题1-页面布局：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px,中间自适应。

    题目:假设高度已知,请写出三栏布局,其中左栏.右栏宽度各为300px,中间自适应. [题外话:日常宣读我的目标===想要成为一名优雅的程序媛] 一.分析 1. 题目真的像我们想得这么简单吗? 其实不然 ...

  3. 假设高度已知，请写出三栏布局，其中左右各为300px 中间自适用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 布局：高度已知，布局一个三栏布局，左栏和右栏宽度为200px，中间自适应

    需求:高度已知为200px,写出三栏布局,左栏和右栏各位200px,中间自适应,如下图所示: 方法一:float浮动布局 原理是:定义三个区块,需要注意的是中间的区块放在右边区块的下面,统一设置高度为 ...

  5. 如果有三个Bool型变量，请写出一程序得知其中有2个以上变量的值是true

    下面这篇文章是从StackOverflow来的.LZ面试的时候遇到了一道面试题:“如果有三个Bool型变量,请写出一程序得知其中有2个以上变量的值是true”,于是LZ做了下面的这样的程序: bool ...

  6. 请写出JavaScript中常用的三种事件。

    请写出JavaScript中常用的三种事件. 解答: onclick,onblur,onChange

  7. css高度已知，左右定宽，中间自适应三栏布局

    css高度已知,左右定宽,中间自适应三栏布局: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  8. 【Java面试题】30 子线程循环10次，接着主线程循环100，接着又回到子线程循环10次，接着再回到主线程又循环100，如此循环50次，请写出程序。

    题目如下: 子线程循环10次,接着主线程循环100,接着又回到子线程循环10次, 接着再回到主线程又循环100,如此循环50次 思路如下: 子线程语主线程为互斥,可用SYNCHRONIZED.很容易想 ...

  9. 请写出5种常见到的runtime exception。

    请写出5种常见到的runtime exception. 解答: NullPointerException:当操作一个空引用时会出现此错误. NumberFormatException:数据格式转换出现 ...

随机推荐

  1. 简单而粗暴的方法画任意阶数Bezier曲线

    简单而粗暴的方法画任意阶数Bezier曲线 虽然说是任意阶数,但是嘞,算法原理是可以到任意阶数,计算机大概到100多阶就会溢出了 Bezier曲线介绍] [本文代码] 背景 在windows的Open ...

  2. 087、日志管理之 Docker logs （2019-05-09）

    参考https://www.cnblogs.com/CloudMan6/p/7749304.html   高效的监控和日志管理对保持生产系统只需稳定的运行以及排查问题至关重要.   在微服务架构中,由 ...

  3. luogu P5328 [ZJOI2019]浙江省选

    传送门 每个人都可以看成一条直线\(y=ax+b\),所以我们要求的是每条线在整点处,上方线的数量的最小值(注意多条直线如果交于同一整点互不影响) 如果\(m=1\),其实只要求出半平面交,然后在半平 ...

  4. MySQL数据库入门常用基础命令

    MySQL数据库入门———常用基础命令      数据——公司的生命线,因此在大多数的互联网公司,都在使用开源的数据库产品,MySQL也因此关注度与使用率非常的高,所以做为运维的屌丝们,掌握它的一些基 ...

  5. oracle链接报错shared memory realm does not exist

    问题描述: 前两天能够正常链接,今天来了突然不能链接,原因不详. 处理方法: 连接linux进行如下操作: 1.sqlplus /nolog 2.conn / as sysdba 3.startup ...

  6. linux下mysql的常用命令

    更改mysql数据库root的密码 首次进入数据库是不用密码的: [root@localhost ~]# /usr/local/mysql/bin/mysql -uroot Welcome to th ...

  7. vue项目进行时，script标签中，methods事件中函数使用的async/await

    用 async/await 来处理异步 await关键字只能放到async函数里面,通过await得到就是Promise返回的内容:当然也能通过then()去获取,若通过then()获取了则就无Pro ...

  8. 为什么现在UML很少用了

    新霸哥发现UML在面向对象的设计中的需求,相关行为.一些体系结构的实现提供了一套综合完整的表示法,但是由于使用的人比较少,初学者不容易快速入门,所以就导致了UML不是那么的受欢迎. UML在开发中有什 ...

  9. centos--软件源--本地软件源---离线安装

    一.软件源配置文件 1./etc/yum.conf 配置文件 [main] cachedir=/var/cache/yum #yum下载的RPM包的缓存目录 keepcache= #缓存是否保存,1保 ...

  10. laraveladmin省市区三级联动

    Distpicker是一个中国省市区三级联动选择组件,这个包是基于Distpicker的laravel-admin扩展,用来将Distpicker集成进laravel-admin的表单中 安装 com ...