小小例子，注意中间的div应该写在最后，留爪。

先上个高清无码图

源码实现

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title></title>

    <link href="reset.css" rel="stylesheet" /> <!--重置默认样式,你可以把这句注释掉-->

    <style>

        div {

            line-height:60px; /*让字体垂直居中*/

        }

        div.box {

            width: 100%;

            height: 60px;

            background: yellow;

            text-align: center; /*让字体水平居中*/

            color: white;

        }

            div.box div.left, div.right {

                width: 60px;

                height: 60px;

                background: red;

            }

            div.box div.left {

                float: left;

            }

            div.box div.right {

                float: right;

            }

            div.box div.center {

                height: 60px;

                background: green;

                margin: 0 60px 0 60px; /*这句不要忘了，用来分开左右部分*/

            }

    </style>

</head>

<body>

    <div class="box">

        <div class="left">左固定</div>

        <div class="right">右固定</div>

        <div class="center">中间填满</div>

    </div>

</body>

</html>

CSS布局——左右固定中间填满的更多相关文章

  1. css实现div的高度填满剩余空间

    css实现div的高度填满剩余空间 .top{ width: 100%; height: 70px;} .bottom{background-color: #cc85d9;width: 100%;po ...

  2. css background-size与背景图片填满div

    background-size与背景图片填满div 在开发中,常有需要将一张图片作为一个div的背景图片充满div的需求 background-size的取值及解释 background-size共有 ...

  3. css圆，背景,img填满等样式

    background 属性 属性值 描述 background-color 单词颜色表示法.rgb.十六进制 设置元素的背景颜色 background-image url('http://www.aa ...

  4. 【转】CSS实现div的高度填满剩余空间

    转自:http://www.cnblogs.com/zhujl/archive/2012/03/20/2408976.html 高度自适应问题,我很抵触用js去解决,因为不好维护,也不够自然,但是纯用 ...

  5. css布局两边固定中间自适应的四种方法

    第一种:左右侧采用浮动 中间采用margin-left 和 margin-right 方法. 代码如下: <div style="width:100%; margin:0 auto;& ...

  6. css布局两端固定中间自适应

    第一种:采用浮动 1.1首先来看一下网上一个哥们给的代码 <body> <div class="left">左</div> <div cl ...

  7. CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼

    今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...

  8. CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)

    经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...

  9. DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度

    一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...

  10. css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）

    (css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...

随机推荐

  1. 输出满足1+2+3+…+*n*<8888的最大整数

    输出满足1+2+3+-+n<8888的最大整数 编写应用程序,输出满足1+2+3+-+n<8888的最大整数 输出格式:满足条件的最大整数:xxxxx public class Demo0 ...

  2. 自主开发的OFD编辑器简介 -- 开ofd可编辑之先河

    前言  OFD是板式文档格式,板式文档只管显示:怎么对板式文档编辑,那不是OFD标准考虑的事.有时使用者是"不讲道理的",我就是想要编辑ofd文件!需求就是开发软件的动力,毕竟开发 ...

  3. 【转】为什么说java只有值传递？

    原文地址: https://www.cnblogs.com/ironHead-cjj/p/11366888.html

  4. 【转】Java操作Excel竟然这么简单！

    最近项目需求需要用到操作Excel的功能,之前使用POI实现,但是数据量大了之后支持不是很好,所以就在网上找找资源,果不其然,如下: 原文链接:没想到啊,Java操作Excel竟然这么简单!

  5. 题解：AT_abc386_d [ABC386D] Diagonal Separation

    分析题面,发现题目求的是是否存在一个白点被 \((1, 1)\) 和任意一个黑点围成的矩形内. 先将所有黑点按 \(x\) 坐标排序. 枚举所有的白点. 找到所有横坐标不比该白点横坐标小的所有黑点的纵 ...

  6. RocketMQ -- offset管理

    正文首先来明确一下 Offset 的含义, RocketMQ 中, 一 种类型的消息会放到 一 个 Topic 里,为了能够并行, 一般一个 Topic 会有多个 Message Queue (也可以 ...

  7. Fail pg walkthrough Intermediate

    nmap ┌──(root㉿kali)-[/home/ftpuserr] └─# nmap -p- -A 192.168.159.126 Starting Nmap 7.94SVN ( https:/ ...

  8. GD32F4xx FLASH存储

    一.GD32F4xx的内存 GD32F4xx的内存结构由:主存储器.系统信息存储器.一次性编程区域和选项字节等 4 部分组成. 主存储器:用来存放代码和数据常数(如 const 类型的数据).分为 2 ...

  9. 简单聊一下*SWITCH*交换机的作用

    交换机 交换机工作在数据链路层的物理设备或者说是接入层的物理设备,转发数据帧. 随着企业网络的发展,越来越多的用户需要接入到网络,交换机提供的大量的接入端口能够很好地满足这种需求.同时,交换机也彻底解 ...

  10. java中的HsahMap

    HsahMap HashMap 是 Java 中最常用的集合类之一,它实现了 Map 接口,基于哈希表存储键值对 HashMap的存储是无顺序的 HashMap存储的是键值对(key-value)其中 ...