这里主要用到的是position:absolute;及margin属性;代码很简单，一看就明白。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>三列布局,左右固定值,中间自适应</title>
    <style type="text/css">
        .container{position: relative;}
        .left{position:absolute;left:0;top:0;width: 200px;height:500px;background-color: #f34;}
        .right{position: absolute;right: 0;top:0;width: 300px;height:500px;background-color: #fcc;}
        .middle{margin:0 300px 0 200px;height:500px;background-color: #ccc;}
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="middle">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="right"></div>
    </div>
</body>
</html>

那么它呈现在页面上的样子则是这样的

css实现三列布局，左右固定值，中间自适应。的更多相关文章

  1. 纯CSS实现三列布局(两边固定，中间自适应)

    看了一些网上的案例,感觉较繁杂,于是,自己整理了一篇来说明这个东西. 也是给我自己复习吧,以前有人问道,我还没答上来呢.＝＝ 看代码: html: <div class="top&qu ...

  2. CSS实现三列布局

    三列布局指的是两边两列定宽,中间的宽度自适应. 常用三种方法: 定位 浮动 弹性盒布局 定位方式 最直观和容易理解的一种方法,左右两栏选择绝对定位,固定于页面的两侧,中间的主体选择用margin确定位 ...

  3. HTML5+CSS实现三列布局自适应

    利用CSS的float属性可以将元素并排,做出三列并排的布局. 如这样的效果 实现的原理:只要将3个元素设置float属性,属性值为left,同时指定不同比例的宽度,及高度. 下面是实现代码 < ...

  4. CSS 经典三列布局

    一 圣杯布局 1 html结构 <!DOCTYPE html> <html> <head> <title></title> <link ...

  5. CSS实现三列布局方法总结

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABYwAAAI7CAYAAABPx9+YAAARJElEQVR4nO3cwWnDQBBA0TioJrXhTl

  6. css常见的各种布局下----三列布局

    css 三列布局,左右固定宽度右边自适应 1不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子,使用浮动,并且设置宽度为100%,不设置浮动元素内容不 ...

  7. 三列布局，读《css那些事儿》

    1.两列定宽,中间自适应 要点:浮动.负边距效果.mainbox增加内容div并设置margin.:after清除浮动 原理:mainbox的浮动并将其宽度设置为100%,次要内容及侧边栏设置固定宽度 ...

  8. 简单的CSS网页布局--三列布局

    三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. (一)三列布局自适应 <!DOCTYPE ...

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

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

随机推荐

  1. cocos2d-x中DrawNode常见的图像绘制函数

    //绘制矩形  ('起始点' , '目标点' , '填充颜色') auto rect=DrawNode::create(); rect->drawRect(Vec2(0,0),Vec2(100, ...

  2. 第一百二十七节，JavaScript，JSON数据类型转换，数据转换成字符串，字符串转换成数据

    第一百二十七节,JavaScript,JSON数据类型转换,数据转换成字符串,字符串转换成数据 学习要点: 1.JSON语法 2.解析和序列化 前两章我们探讨了XML的结构化数据,但开发人员还是觉得这 ...

  3. 怎么删除hao.qquu8.com绑定

    运行 输入 regedit 编辑 - 查找  hao.qquu8.com 然后修改成 你想绑定的 主页 就好

  4. jQuery 之玩转 checkbox

    <!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...

  5. 一台服务器上同时启动多个 Tomcat

    在同一台服务器上启动多个 Tomcat 服务,需要修改 conf/server.xml文件里的三个部分,如下: 1.修改Http访问端口(默认为8080端口) <Connector port=& ...

  6. 读取Oracle表结构数据

    <html lang="zh-cn"> <head> <meta name="generator" content="O ...

  7. 深入.NET平台和C#编程

    第一章  深入.NET框架 1.Microsoft.NET框架概述: 1).NET介绍 2)为什么需要.NET框架 通过如下两个问题说明为什么需要.NET框架 01,C#程序可以再不同平台(PDA,P ...

  8. 转载：c# string.Format

    C#:STRING.FORMAT数字格式化输出 1.各种常用数字格式化 货币转换 C 或 c(默认小数点后2位.C3后面跟的数字就代表小数后几位)    string.Format("{0: ...

  9. navicat导出数据结构及数据

    右键选中数据库-->右键->数据传输->高级->选中所需导出的表->选择文件

  10. strutsprepareAndExecuteFiter

    FilterDispatcher是早期struts2的过滤器,后期的都用StrutsPrepareAndExecuteFilter了,如 2.1.6.2.1.8.StrutsPrepareAndExe ...