这里主要用到的是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. Finding Lines

    Finding Lines 题目链接:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8& ...

  2. [coding horror] 1 - sum 2

    sum 2 描述 输入一个递增排序的数组和一个数字S,在数组中查找两个数,是的他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 对应每个测试案例,输出两个数,小的先输出. codi ...

  3. 负载均衡,最理想使用 redis实现session共享

    负载均衡在多台php服务器负载均衡的情况下,第一秒请求是a服务器,第二秒请求是b服务器, session必须放在一个公共的服务器,最理想是使用 redis实现session共享.内存的速度比磁盘访问快 ...

  4. zabbix 安装配置以及漏洞检测脚本

    最近zabbix爆出sql注入漏洞.之前一直没装过.就想着来安装一次.我在centos配置玩玩,记录一下:1.安装LAMP yum -y install httpd  mysql  mysql-ser ...

  5. nohup及/dev/null使用

    1.nohup    ----后台执行,执行记录默认输出到当前目录下的nohup.out文件         nohup find /etc -name passwd 2./dev/null介绍 把/ ...

  6. <hdu - 1600 - 1601> Leftmost Digit && Rightmost Digit 数学方法求取大位数单位数字

    1060 - Leftmost Digit 1601 - Rightmost Digit 1060题意很简单,求n的n次方的值的最高位数,我们首先设一个数为a,则可以建立一个等式为n^n = a * ...

  7. IntelliJ Idea 14 安装 Golang 插件 google-go-lang-idea-plugin 的方法

    IDEA 的编辑器都很强悍,所以现在学Go 也想用他啊,无奈这个插件搞了好久,整理了下流程记录下 1. 当然是下载 IDEA 编辑器了 http://www.jetbrains.com/idea/do ...

  8. Chrome 开发者工具的使用

    Console 那里是可以调节上下文的,不同的文档上下文互相隔离,默认是top,也就是当前打开的页面.这个功能在页面包含 iframe 或者开发插件的时候才用得到. 早期版本的 Resource 已经 ...

  9. line-height属性详解

    line-height属性详解:http://www.cnblogs.com/dolphinX/p/3236686.html

  10. Mac最好的虚拟机软件Parallels，体验比Vmware棒

    每一位Mac电脑用户,必须安装虚拟机软件,在虚拟机里面安装Windows系统,解决日常必须用windows软件的问题,解决国内网银登录的兼容问题. 你一定不要用Mac系统自带的boot camp方式安 ...