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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

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

    <title>Document</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .box>div{

            height: 100px;

        }

        .box .left{

            background-color: red;

            width: 300px;

            float: left;

        }

        .box .right{

            background-color: blue;

            width: 300px;

            float: right;

        }

        .box .center{

            text-align: center;

            line-height: 100px;

            color: #fff;

            background-color: orange;

        }

    </style>

</head>

<body>

    <div class="box">

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

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

        <div class="center">第一种方法：浮动</div>

    </div>

</body>

</html>

　　

css高度已知，左右定宽，中间自适应三栏布局的更多相关文章

  1. Layout两列定宽中间自适应三列布局

    最容易理解的一种方法,以中间内容为主体,通过 margin 或者 padding 将两侧撑开,最后用 absolute 定位两侧 html: <div class="container ...

  2. CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局

    圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局 虽然两者的实现方法略有差异,不过都遵循了以下要点: 1.两侧宽度固定 ...

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

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

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

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

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

    假设高度已知,请写出三栏布局,其中左栏.右栏各为300px,中间自适应的五种方法 HTML CSS 页面布局 题目:假设高度已知,请写出三栏布局,其中左栏.右栏各为300px,中间自适应 <!D ...

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

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

  7. CSS布局 两列布局之单列定宽,单列自适应布局思路

    前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, fl ...

  8. css布局：定宽，自适应

    css三栏布局:1.中自:float,absolute,margin三种方法.2.中固:margin,table两种方法. 两边定宽,中间自适应: float: #left{ float:left; ...

  9. css 两列布局中单列定宽单列自适应布局的6种思路

    前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...

随机推荐

  1. Luogu 4868 Preprefix sum

    类似于树状数组维护区间的方法. 每一次询问要求$\sum_{i = 1}^{n}\sum_{j = 1}^{i}a_j$. 展开一下: $\sum_{i = 1}^{n}\sum_{j = 1}^{i ...

  2. The project was not built since its build path is incomplete. Cannot find the class file for java.lang.Object

    The project was not built since its build path is incomplete. Cannot find the class file for java.la ...

  3. Java数学相关工具类

    1.求百分比 public class Test1 { public static String myPercent(int y, int z) { String baifenbi = "& ...

  4. 【msyql_获取时间的前后几天函数date_sub】

    select now()-- 2017-05-16 16:48:02select curdate()  -- 2017-05-16 select curdate() + 1 -- 20170517 s ...

  5. C# 写 LeetCode easy #21 Merge Two Sorted Lists

    21. Merge Two Sorted Lists Merge two sorted linked lists and return it as a new list. The new list s ...

  6. 利用css实现鼠标经过元素，下划线由中间向两边展开

    代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  7. 原来C#可以直接写二进制数的

    二进制数在C#中的写法: byte b=0b01111110 二进制字符串的解释: string bstr="0111110"; byte b=Convert.ToByte(bst ...

  8. php接入图灵机器人

    官网:http://www.tuling123.com 文档:https://www.kancloud.cn/turing/www-tuling123-com/718218 注册账号获取:apikey ...

  9. MySQL库改名、表改名

    数据库中的库或表在开发环境下可能需要改名,关于MySQL的改名步骤如下: 1.备份数据库,备份后就可以安心的去改名了,如果操作错误还可以及时恢复 mysqldump -R -uroot -p 数据库名 ...

  10. Unity 动画系统目录

    引言 提到动画,你想到的是什么? 图片在循环播放构成的动画.UI物体的循环变色.2D 3D物体在循环运动.链条弹簧的运动.3D的玩家在行走奔跑挥剑.非人形的运动... 动画实现方式的分类 动画实现的方 ...