假设高度已知，请写出三栏布局，其中左栏、右栏各为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. Qt两个类通过信号槽通信

    qt需要通过信号槽来通信,connect的时候总是返回false,请教了公司的一个小哥,才解决了问题,虽然是个很白痴的问题. bool b = QObject::connect(m_pCollectO ...

  2. eclipse project--->clean作用

    eclipse project-->clean  ,clean主要是class文件删除,并同时编译新的工程,生成新的class文件. 如果修改代码后,在运行时,还是旧代码,可能class文件还是 ...

  3. Python中字典合并的四种方法

    字典是Python语言中唯一的映射类型.映射类型对象里哈希值(键,key)和指向的对象(值,value)是一对多的的关系,通常被认为是可变的哈希表.字典对象是可变的,它是一个容器类型,能存储任意个数的 ...

  4. 查找元素在list中的位置以及折半查询

    问题 查找某个值在list中的位置 解决思路 能够用折半查询的方法解决此问题. 解决(Python) #! /usr/bin/env python #coding:utf-8 #折半查找某个元素在li ...

  5. [WPF]使用CheckAccess检测是否在控件的ui线程上执行

    private void Parallel(object sender, RoutedEventArgs e) { Task.Run(() => ChangeColour(Brushes.Red ...

  6. jmeter强大的扩展插件！！

    jmeter4.0以上版本,如jmeter5.1.1版本的集成插件,只需要在官网下下载“plugins-manager.jar”包,放在jmeter安装路径的lib/ext目录下即可使用. (但该ja ...

  7. .Net Core 认证系统源码解析

    不知不觉.Net Core已经推出到3.1了,大多数以.Net为技术栈的公司也开始逐步的切换到了Core,从业也快3年多了,一直坚持着.不管环境怎么变,坚持自己的当初的选择,坚持信仰 .Net Cor ...

  8. 4、MySQL 申明变量给查询数据编号

    摘自: https://www.cnblogs.com/qixuejia/archive/2010/12/21/1913203.html https://blog.csdn.net/arbben/ar ...

  9. 用 C++ 模板元编程实现有限的静态 introspection

    C++ 中的奇技淫巧大部分来源于模板技术,尤其是模版元编程技术(Template Meta-Programming, TMP).TMP 通过将一部分计算任务放在编译时完成,不仅提高了程序的性能,还能让 ...

  10. laravel中间件失效，配置文件重新加载

    composer dump-autoload php artisan cache:clear 清理视图缓存 php atisan view:clear 清除运行缓存 php artisan cache ...