这里主要用到的是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. trove显示更多flavor信息

    https://review.openstack.org/#/c/352786/12 这是我目前提交的commit,如果想添加新的flavor信息可以参考这个,有几个需要注意的点是在跑py27的时候, ...

  2. Elasticsearch 5.0 安装 Search Guard 5 插件 （五）

    一.Search Guard 简介 Search Guard  是 Elasticsearch 的安全插件.它为后端系统(如LDAP或Kerberos)提供身份验证和授权,并向Elasticsearc ...

  3. 如何解决sql server定时作业调用Kettle job出错

    错误信息: Unable to list jar files in plugin folder 'C:\Windows\system32\config\systemprofile\.kettle\pl ...

  4. EasyCHM(CHM电子书制作工具) v3.84.545 绿色版

    软件名称:EasyCHM(CHM电子书制作工具) v3.84.545 绿色版 软件语言: 简体中文 授权方式: 免费软件 运行环境: Win 32位/64位 软件大小: 2.78MB 图片预览: 软件 ...

  5. js判断数组里面的值是否相等。

    var zhi=[]; var zhiT=[]; //var arr=["a","b","a","a"]; var ar ...

  6. libvirt里的面向对象的C语言

    C语言:类的声明和定义 // 通用父类的定义 struct _virClass { virClassPtr parent; unsigned int magic; char *name; size_t ...

  7. gmic全球移动互联网大会 全球九站已开启！

    由长城会主办的全球移动互联网大会( 简称GMIC)已成长为世界范围内最具影响力的辐射并连结东西半球的移动互联网商务平台,是最大规模的移动互联网行业盛会. 2017gmic全球移动互联网大会北京站将于2 ...

  8. java 打开浏览器 url

    public class openBrowers { public static void main(String[] args) { try { //String url = "http: ...

  9. jsp:useBean的使用

    ->Bean的基本要素: 1.必须要有一个不带参数的构造器,在jsp元素创建Bean时会调用空构造器 2.Bean类应该没有任何公共实例变量,也就是说,不允许直接访问实例变量,通过setter/ ...

  10. Conversion to Dalvik format failed with error 1（android）

    1.如果不修改android sdk版本,则使用project clean 命令作用于某工程即可. (该处理方式只是在高版本中兼容了低版本工程,未真正意义上的升级) 2.如果修改android sdk ...