小小例子，注意中间的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. G1原理—6.G1垃圾回收过程之Full GC

    大纲 1.FGC的一些前置处理 2.FGC的整体流程 3.传统FGC只能串行化 + G1的FGC可以并发化 4.并行化FGC之并行标记 + 任务窃取 5.并行化FGC之跨分区压缩 + 避免对象跨分区 ...

  2. runoob-Android 基础入门教程-1

    https://www.runoob.com/w3cnote/android-tutorial-interface-design.html 公司的话,大部分使用的都是Axure Rp,但是这个东西比较 ...

  3. 线上JVM性能优化详解

    概述 jvm中除了程序计数器,其他的区域都有可能会发生内存溢出 内存溢出是什么? 当程序需要申请内存的时候,由于没有足够的内存,此时就会抛出OutOfMemoryError,这就是内存溢出 内存溢出和 ...

  4. linux：MariaDB安装

    介绍 链接 安装 查看系统中是否已安装 rpm -qa | grep -i mariadb 返回结果类似如下内容,则表示已有 MariaDB 的包 为避免安装版本不同造成冲突,请执行以下命令移除已安装 ...

  5. String、StringBuffer、StringBuilder三者的异同

    /*String.StringBuffer.StringBuilder三者的异同?String:不可变的字符序列:底层使用char[]存储StringBuffer:可变的字符序列:线程安全的,效率低: ...

  6. Volar Vetur 在 VSCode 里的配置

    VSCode 对 vue2 vue3 项目如何配置 1. 在 vscode 安装 vetur.Vue - Official(之前叫 Volar) 两个插件 2.你若是 vue3 项目,直接在你项目工作 ...

  7. FastReport实现遍历Dataset数据集计算

    delphi在使用fastreport进行打印时,需要对数据进行计算求和. 在打印文本框的OnBeforePrint事件中进行以下代码即可实现效果 procedure Memo7OnBeforePri ...

  8. 微信小程序如何更改appid

    每一个吧小程序对应唯一一个appid; 但是在有些时候,我们需要更改appid; 点击详情,小程序右侧会出现下面的弹窗: 此时我们可以看见修改appid 这里修改了,才是真正的修改了: 这样我们上传微 ...

  9. DeepSeek+AnythingLLM打造自己大模型知识库

    DeepSeek+AnythingLLM打造自己大模型知识库 目       录 1.      安装Ollama 2.      下载DeepSeek模型 3.      安装AnythingLLM ...

  10. mac安装php单点调试环境

    页面预览和抓包方式 sudo php-fpm sudo killall php-fpm 开启/usr/local/etc/nginx/ nginx nginx -s quit 运行Charles就行 ...