假设高度已知，请写出三栏布局，其中左栏、右栏各为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. 最长不下降/不上升子序列&&最长上升/下降子序列

    最长不下降/不上升子序列&&最长上升/下降子序列 struct cmp1{bool operator()(int a,int b){return a>b;}}; int main ...

  2. springboot2.0国际化

    springboot2.0配合thymeleaf实现页面国际化 1. 引入thymeleaf <?xml version="1.0" encoding="UTF-8 ...

  3. 网页嵌入pdf、在线预览pdf工具及插件（转）

    摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如下: 代码片段1: 1 <object ty ...

  4. 2019icpc徐州网络赛

    A Who is better? 题意 excrt+斐波那契博弈 分析 Java的BigInteger对象默认为null,不能直接比较. 代码 import java.math.BigInteger; ...

  5. 解决iframe缓存机制导致页面不清除缓存不刷新页面的bug

    在使用iframe时,已有页面嵌套了一个iframe页面,当这个页面提交后再次跳转到本页面时,原本iframe内的页面应该刷新数据的,结果未刷新,需要清除缓存后才刷新. 解决方案: var fresh ...

  6. ArcGis执行StartEditing(true)时,winform程序直接崩溃.

    问题描述:在Program中配置了ArcGis的许可,又在winform窗体添加了许可,导致执行StartEditing(true)时,winform程序直接崩溃. 原代码如下: static cla ...

  7. Action获取请求参数的3中方式

    方式一:Action本身作为Model对象,通过属性注入(Setter)方法讲参数数据封装到Action中 具体为:在Action中,提供和参数名相同的几个属性,并为其提供set方法,那么,该参数会被 ...

  8. SOA架构简介

    一. 什么是SOA 架构 SOA是一种架构模型,它可以根据需求通过网络对松散耦合的粗粒度应用组件进行分布式部署.组合和使用.服务层是SOA的基础,可以直接被应用调用,从而有效控制系统中与软件代理交互的 ...

  9. MATLAB中的函数句柄及其应用

    1.函数句柄的创建 函数句柄(function handle)是MATLAB中的一类特殊的数据结构,它的地位类似于其它计算机语言里的函数对象(Javascript,Python),函数指针(C++), ...

  10. 023-zabbix性能优化中的几个中肯建议

    随着zabbix的广泛应用,少数人的zabbix服务器在性能上出现瓶颈,或者在未来会出现性能方面的瓶颈,接下来讨论几个有效并且简单的优化方案. 服务器硬件 想通过几个简单的配置让服务器提高成倍的性能, ...