float——浮动布局：

使用浮动，先渲染左右两个元素，分别让他们左右浮动，然后再渲染中间元素，设置它的margin左右边距分别为左右两个元素的宽度。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div style="width:300px; float:left; background:#6FF">左侧的内容 固定宽度</div>

    <div style="width:200px; float:right; background-color:#960">右侧的内容 固定宽度</div>

    <div style="margin-left:300px;margin-right:200px; background-color:#9F3;">中间内容，自适应宽度</div>

</body>

</html>

position——定位：

使用定位方式，不需要先渲染中间元素，只要把左右两个元素分别使用定位，left:0;right:0;中间元素设置margin左右边距为左右两个元素的宽度即可。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

.left{

     width:200px;

     height:500px;

     position: absolute;

     top:0;

     left:0;

     background:blue;

}

.center{

    margin-left: 200px;

    margin-right: 300px;

    height:500px;

    background-color: green;

}

.right{

width:300px;

height:500px;

position: absolute;;

top:0;

right:0;

background: blue;

}

    </style>

</head>

<body>

    <div class="left">左边</div>

    <div class="center">中间</div>

    <div class="right">右边</div>

</body>

</html>

双飞翼布局：

与其他方式不同，它最先渲染的是中间元素，然后才渲染两边元素（注意，这一点与float布局方式正好相反哟），先将三个元素都设置为向左浮动，然后使用负边距将左右两个元素覆盖到中间元素的左右两边，形成羽翼。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

.middle{

    float: left;

    width: 100%;

    height: 50px;

    background-color: #fff9ca;

}

.middle-wrap{

    margin: 0 200px 0 150px;

}

.left{

    float: left;

    width: 150px;

    height: 50px;

    background-color: red;

    margin-left: -100%;       /*负边距的作用就是让左边div盖在中间div上面*/

}

.right{

    float: left;

    width: 200px;

    height: 50px;

    background-color: yellow;

    margin-left: -200px;    /*让右边的div覆盖在中间的div右边*/

}

    </style>

</head>

<body>

    <div class="middle">

        <div class="middle-wrap">middle</div>

    </div>

    <div class="left">left</div>

    <div class="right">right</div>

</body>

</html>

原文：http://www.cnblogs.com/pwei/archive/2016/04/01/css-layout.html

css 左右固定宽度，中间自适应的三列布局的更多相关文章

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

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

  2. CSS三列布局之左右宽度固定，中间元素自适应问题

    最近学到了几种关于左右固定宽度,中间自适应的三列布局的方法,整理了一下,在这里跟大家一起分享分享,其中有什么不足的还望各位给指导指导哈. 首先我想到的是float——浮动布局 使用浮动,先渲染左右两个 ...

  3. DIV+CSS 网页布局之：三列布局

    1.宽度自适应三列布局 三列布局的原理和两列布局的原理是一样的,只不过多了一列,只需给宽度自适应两列布局中间再加一列,然后重新计算三列的宽度,就实现了宽度自适应的三列布局. 同样的道理,更多列的布局, ...

  4. html 三列布局（两列自适应，一列固定宽度）

    不做过多解释:主要是记录一个完整的布局样式,实现页面大致三列其中左右两列是自适应宽度,中间固定宽度效果. 不多少代码奉上: CSS样式代码: /******************** *公共标签样式 ...

  5. css实现三列布局，左右固定值，中间自适应。

    这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN&quo ...

  6. HTML/CSS学习之 三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化

    第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...

  7. CSS如何实现三列布局？如果两端固定、中间是自适应又该如何做？

    使用浮动布局来实现 左侧元素与右侧元素优先渲染,分别向左和向右浮动 中间元素在文档流的最后渲染,并将 width 设为 100%,则会自动压到左右两个浮动元素的下面,随后在中间元素中再添加一个div元 ...

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

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

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

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

随机推荐

  1. python瞎练

    需求:有不规则列表 singlelist3 = [ '总计', '每吨人工:', '总人工', 1748.07, '金额'],如果当前元素为字符串且该元素的下一个相邻位置仍为字符串,那么请在该元素后面 ...

  2. vector简单使用

    在刷ccf题的时候日常做完去网上查看别的同学怎么做的 发现有使用vector后三十几行代码就写出来的,虽然时间复杂度和我一样十几毫秒,but !我看中了它的代码量啊!多么的少啊! 所以百度了vecto ...

  3. ACM-ICPC 2018 南京赛区网络预赛 K. The Great Nim Game（博弈）

    题目链接:https://nanti.jisuanke.com/t/31000 题意:有N堆石子(N为大数),每堆的个数按一定方式生成,问先手取若干堆进行尼姆博弈,必胜的方式有多少种. 题解:因为 k ...

  4. Java实现浏览器大文件分片上传

     上周遇到这样一个问题,客户上传高清视频(1G以上)的时候上传失败. 一开始以为是session过期或者文件大小受系统限制,导致的错误. 查看了系统的配置文件没有看到文件大小限制, web.xml中s ...

  5. 在linux操作系统上进行简单的C语言源码的gcc编译实验

    尝试在linux上用gcc 而非封装完好的codeblocks,vs等ide 来编译c和cpp源程序 首先查看我的gcc版本,我的是VM centos 自带的,没有的话得自行安装,安装上gcc就可以在 ...

  6. 如何利用新浪官方的短网址API接口实现T.cn短链接的压缩生成

    短网址的实现原理就是有一个数据表会配置文件将短网址和实际网址进行对应,当请求某个短网址时,程序跳转到对应的实际网址上去,从而实现网址的访问.目前国内最稳定最好用的是新浪T.cn短链接. 之前新浪提供了 ...

  7. Codeforces 645E. Intellectual Inquiry（DP，贪心）

    Codeforces 645E. Intellectual Inquiry 题意:给定一串字符,由前k个小写拉丁字母组成,要求在该字符串后面补上n个字符(也从前k个小写拉丁字母里面选),使得最后得到的 ...

  8. OSX 改变PHP安装路径环境变量

    当使用XAMPP来学习Laravel的时候,用composer安装laravel总是报错,说mcrypt is required ,但是当我在终端里打印 which php 显示的是usr/bin/p ...

  9. 6.RabbitMQ--事物

    RabbitMQ之消息确认机制 如何防止消息丢失? 如何防止消息是否正确送达? 有些业务场景需要我们对于消息的幂等性要求是比较高的,需要消息不能丢失,在使用RabbitMQ的时候,我们可以通过消息持久 ...

  10. CSS-居中方法汇总

    CSS居中是前端工程师经常要面对的问题,也是基本技能之一.今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种.如有漏掉的,还会陆续的补充进来. 水平居中 ...