假设高度已知，请写出三栏布局，其中左栏、右栏各为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. C++中的自定义内存管理

    1,问题: 1,new 关键字创建出来的对象位于什么地方? 1,位于堆空间: 2,有没有可能位于其它地方? 1,有: 2,通过一些方式可以使动态创建的对象位于静态存储区: 3,这个存储区在程序结束后释 ...

  2. phpstorm配置phpunit进行单元测试

    1.配置单元测试目录: (1)autoload.php <?php function autoloader($dir){ spl_autoload_register(function($name ...

  3. vue单页应用首次加载太慢之性能优化

    问题描述: 最近开发了一个单页应用,上线后发现页面初始加载要20s才能完成,这就很影响用户体验了,于是分析原因,发现页面加载时有个 vendor.js达到了3000多kb,于是在网上查找了一下原因,是 ...

  4. 【leetcode389】389. Find the Difference

    异或 找不同 —.— public class Solution { public char findTheDifference(String s, String t) { char temp = 0 ...

  5. 四、Signalr手持令牌验证

    一.JWT 服务端在respose中设置好cookie,浏览器发请求都会自动带上,不需要做额外设置 但是如果客户端是非浏览器,或者要兼容多种客户端,这个方法就不行了 Js端 @{ Layout = n ...

  6. mariadb数据库简介

    mariadb(默认端口3306) 什么是数据库? 白话:用来存放数据的仓库,这个仓库只不过是按照一定的数据结构来组织. 数据库模型分为三种: 层次式数据库 网络式数据库 关系型数据库和非关系数据库 ...

  7. C#.net中的rank方法

    string[,] abcd = new string[2, 4];abcd[0, 0] = "a";abcd[0, 1] = "b";abcd[0, 2] = ...

  8. 删除表A的记录时，Oracle 报错：“ORA-02292：违反完整约束条件（XXX.FKXXX）- 已找到子记录

    1.找到以”FKXXX“为外键的表A的子表,直接运行select a.constraint_name, a.table_name, b.constraint_name from user_constr ...

  9. AD使用adsi 组件 获取域信息

    // testadsi.cpp : 定义控制台应用程序的入口点.// #include "stdafx.h"#include "windows.h"#inclu ...

  10. 关于FTP和SFTP的操作总结

    SFTP使用的三方类库是Renci.SshNet.DLL SFTP连接大部分网上使用IP地址形式的路径,而我本次使用的是网站形式的.类似sftp.XXX.com SFTP的操作也类似File文件的操作 ...