假设高度已知，请写出三栏布局，其中左栏、右栏各为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. awk对文件的奇偶行做处理

    { if(NR % 2 == 0) printf("%s\n", $0) else printf("%s, ", $1) } awk -f awk.awk da ...

  2. numpy-添加操作大全

    合并 hstack(tup):按行合并 [前面有个 h,可以理解为 行,这样方便记忆] vstack(tup):按列合并 参数虽然是 tuple,但是 list 也行,可以合并2个或者多个数组. a= ...

  3. [.net core]1,asp.net core 的优势及特性

    1.跨平台 支持windows ,linux .macOS 可以托管在iis,apache,Docker,或自宿在自己的进程 2.强大的IDE visual studio 或visual studio ...

  4. [Next] 二.next.js之组件

    next.js 中的组件 next.js 里面的组件(页面)就是 react 里面的组件. 功能组件 在项目之中一个功能组件的创建 , 他可以和父组件放到一个文件里,也可以单独创建一个文件存放组件. ...

  5. django Paginator 让分页变得完美

    参考大佬地址:https://www.zmrenwu.com/courses/django-blog-tutorial/materials/21/ 类视图 from django.contrib.au ...

  6. wex5 如何导包

    wex5中 导jar包 要先把jar文件放在: E:\WeX5\runtime\BaasServer\WEB-INF\lib目录中(我wex5放的是E盘) 点击项目 --> 属性 --> ...

  7. alembic 实践操作

    1. alembic [--config */alembic.ini ] current 2. alembic revision -m "add columns" 编辑生产的模板文 ...

  8. curry&unCurry函数

    unCurry函数与curry函数区别:curry化函数:固定部分参数,返回一个接受剩余参数的新函数,目的是为了缩小适用范围,创建一个针对性更强的函数. unCurry化函数:扩大适用范围,创建一个应 ...

  9. issue - 登录前的信息和标识文件

    DESCRIPTION (描述) /etc/issue 是一个文本文件,它包含了在登录提示符出现之前显示的信息或者系统标识.如果 getty(1) 支持的话,它可能包括多个 @char 和 \char ...

  10. Codeforces 902 树同型构造 多项式长除法构造(辗转相除法)

    A #include <bits/stdc++.h> #define PI acos(-1.0) #define mem(a,b) memset((a),b,sizeof(a)) #def ...