三列布局指的是两边两列定宽，中间的宽度自适应。

常用三种方法：

  • 定位
  • 浮动
  • 弹性盒布局

定位方式

最直观和容易理解的一种方法，左右两栏选择绝对定位，固定于页面的两侧，中间的主体选择用margin确定位置

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>定位方法创建三列布局</title>

     <style>

     *{

         margin: 0;

         padding: 0;

     }

     .left{

         width: 200px;

         height: 500px;

         background-color: yellow;

         position: absolute; /* 绝对定位，使位置固定 */

         left: 0;

         top: 0;

     }

     .center{

         height: 600px;

         background-color: purple;

         margin: 0 300px 0 200px;   /* 通过外边距确定宽度 */

     }

     .right{

         width: 300px;

         height: 500px;

         background-color: red;

         position: absolute; /* 绝对定位，使位置固定 */

         right: 0;

         top: 0;

     }

     </style>

 </head>

 <body>

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

     <div class="center">Center</div>

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

 </body>

 </html>

结果

浮动方法

让左右两边部分浮动，脱离文档流后对中间部分使用margin来自适应

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>浮动法创建三列布局</title>

     <style>

         *{

             margin: 0;

             padding: 0;

         }

         .left{

         width: 200px;

         height: 500px;

         background-color: yellow;

         float: left;

     }

     .center{

         height: 600px;

         background-color: purple;

         margin: 0 300px 0 200px;

         min-width: 100px;  /* 最小宽度，防止浏览器缩小后中间部分被隐藏 */

     }

     .right{

         width: 300px;

         height: 500px;

         background-color: red;

         float: right;

     }

     </style>

 </head>

 <body>

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

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

     <div class="center">Center</div>  <!-- 左右部分脱离文档流，中间部分平铺 -->

 </body>

 </html>

弹性盒布局

使用容器包裹三栏，并将容器的display设置为flex，左右两部分宽度设置为固定，中间flex设置为1，左右两边的值固定，所以中间的自适应

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>弹性盒子创建三列布局</title>

     <style>

         *{

             margin: 0;

             padding: 0;

         }

         .container{

             display: flex;

         }

         .left{

         width: 200px;

         height: 500px;

         background-color: yellow;

     }

     .center{

         height: 600px;

         flex: 1;

         background-color: purple;

     }

     .right{

         width: 300px;

         height: 500px;

         background-color: red;

     }

     </style>

 </head>

 <body>

     <div class="container">

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

         <div class="center">Center</div>

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

     </div>

 </body>

 </html>

CSS实现三列布局的更多相关文章

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

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

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

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

  3. CSS 经典三列布局

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

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

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABYwAAAI7CAYAAABPx9+YAAARJElEQVR4nO3cwWnDQBBA0TioJrXhTl

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

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

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

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

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

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

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

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

  9. css三列布局之双飞翼pk圣杯

    三列布局:两边定宽,中间自适应! 看到这个问题,我第一眼想的就是两边定宽float左右,中间加一个margin宽度自适应或者直接设一个overflow:hidden触发bfc机制,这样也可以,看上去也 ...

随机推荐

  1. salesforce lightning零基础学习(十一) Aura框架下APP构造实现

    前面的一些lightning文章讲述了aura的基础知识,aura封装的常用js以及aura下的事件处理.本篇通过官方的一个superbadge来实现一个single APP的实现. superbad ...

  2. 微信小程序自定义navigationBar标题栏

    小程序默认使用的navigationBar只能设置颜色.文字,左侧返回按钮也是不可改变的,若要实现下方效果有解决方案,但是也有一定的问题. 1.更改app.json "window" ...

  3. Web中的积累：外观模式 Facade

    摘要: 原创出处: http://www.cnblogs.com/Alandre/ 泥沙砖瓦浆木匠 希望转载,保留摘要,谢谢! 壹 前言 目测好久没写文章了,距离上一篇文章也有二十多天.我是怎么了?哈 ...

  4. 浅谈《think in java》：二 一切都是对象

    清晨坐在图书馆,今天聊聊早晨的“果实”. 清单1. 引用操作:对象创建:存储地方:基本类型:数组 “reference”:引用[操作对象的标识符] 例子:创建String类型的引用,并不是对象. St ...

  5. c# Console application Open/Get Url by Browser

    C# url 用 浏览器打开.C#获取浏览器的url static void Main(string[] args) { string file = @"C:\Users\Hero\Desk ...

  6. iOS 快速排序

    一.快速排序概念及其思想 快速排序(QuickSort),又称为交换排序,是分治算法的一种,快速排序采用分治的策略. 1.分治法的基本思想: 将原问题分解为若干个规模更小但结构和原问题相似的子问题.递 ...

  7. 【转载】ASP.NET MVC设置允许跨域访问

    默认情况下,浏览器端发送Ajax请求一般被禁止跨域访问,如A域名网站访问B域名网站的请求会被终止,在ASP.NET MVC项目中,我们可以配置相应的设置项,允许网站的接口跨域访问,主要需要设置Acce ...

  8. Centos7.6 在LNMP上部署禅道

    一.下载禅道,并传到你的服务器上面的/opt文件下. http://dl.cnezsoft.com/zentao/7.3/ZenTaoPMS.7.3.stable.zbox_64.tar.gz 二.使 ...

  9. [PHP] PHP在CLI环境下的错误日志

    1.display_errors = Off;//控制php是否输出错误;在生产环境中输出会泄露敏感信息;建议记录错误而不是将它们发送到STDOUToff :不显示任何错误;stderr :向STDE ...

  10. 程序猿制造Bug的根本原因竟然是....

    传说中: 「杀一个程序猿不需要用枪,改三次需求就可以了.」 而且, 「这竟然也是程序猿制造Bug的根本原因....」 ↓↓↓↓↓↓↓ #/原始需求/#   你去饭店,坐下来. “服务员,给我来份宫保鸡 ...