小小例子，注意中间的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. atomic 包底层实现原理

    一.概念介绍(一)volatile关键字 Java 因为指令重排序,优化我们的代码,让程序运行更快,也随之带来了多线程下,指令执行顺序的不可控. 1.volatile关键字的作用: 内存可见性,修饰的 ...

  2. linux：安装php7.x

    参考:链接 更新yum源 CentOS/RHEL 7.x: rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.n ...

  3. Markers pg walkthrough Intermediate

    发现是个md 变成pdf 的功能站 上网查exp 发现先了一个有用的 https://security.snyk.io/vuln/SNYK-JS-MARKDOWNPDF-5411358 能够任意文件读 ...

  4. 天翼云边缘安全加速平台亮相2023亚太内容分发大会暨CDN峰会

    6月29日,第十二届亚太内容分发大会暨CDN峰会在北京召开.大会聚集了行业领/袖.专家和学者,深度探讨CDN的技术发展.应用与未来发展趋势,会上还公布了2023边缘加速创新企业榜单,中国电信天翼云成功 ...

  5. Nmap 图形界面使用

    Nmap 图形界面的使用 Zenmap,作为Nmap的图形用户界面(GUI),为用户提供了一个直观.易用的方式来执行网络扫描和分析.以下是一个关于如何使用Zenmap的详细指南. 扫描主机 使用Zen ...

  6. 使用mongodb、Kafka保存mqtt消息

    一.引言 随着物联网技术的迅猛发展,大量的设备和传感器产生了海量的数据.本文利用了 MQTT.Kafka 和 MongoDB 各自的优点,满足实时数据处理和大规模数据存储的需求. 如图: 二.总结 优 ...

  7. WSL2走主机IP地址代理的方式

    前言 工作需求导致需要使用到WSL2,git的时候出现网络原因无法拉取.故记录一下走完整个WSL2代理的流程 WSL1 和 WSL2 网络的区别 在 WSL1 时代,由于 Linux 子系统和 Win ...

  8. 升级 element-ui 2.15.7 后遇到 el-date-picker 警告问题

    近期把 element-ui 升级到了官网最新的 2.15.7 版本,无意间发现控制台出现了 Prop being mutated: "placement" 警告,完整警告:

  9. 数字先锋 | 天翼云xDeepSeek，赋能东莞开启智慧政务新篇章！

    人工智能浪潮奔涌 DeepSeek堪称"全能战士" 在各行各业疯狂"上分" 特别是在政务领域 其以强大的智能问答 公文写作.数据分析等能力 为政务服务按下了&q ...

  10. 使用Windows系统自带DLL修复工具修复系统缺失dll的问题

    1. System File Checker(SFC) System File Checker(SFC)是Windows自带的一个工具,可以扫描系统文件并尝试修复任何受损的文件.要使用SFC,请按照以 ...