因为最近心血来潮,就总结了一下css中的几种常见的多列布局。

两列自适应布局

两列自适应布局算是css布局里面最基础的一种布局了,不少网站在使用。

这种布局通常是左侧固定,右边自适应,当然也有反过来的,道理一样,这里有好几种方法。

(张鑫旭老师的博客是左边流式布局,右边固定宽度)
  • 左浮动+margin

 因为浮动会导致元素脱离文档流,所以下面的元素会占据浮动元素原来的位置。
这个时候只要对右边元素设置margin-left:左边div宽度 就可以实现自适应布局。

代码:左浮动实现两列布局

  • 绝对定位实现两列布局

 这个原理类似浮动,因为绝对定位会脱离文档流,只需要设置右div的margin-left就能实现布局。

代码:绝对定位实现两列布局

  • flex实现两列布局

 flex布局一直挺好用,无奈兼容性捉急,ie10+才支持。  

 注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。  

 flex布局默认项目是主轴为水平方向,最主要的是flex属性。flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。  

 大概就是给左边的div一个固定值,然后给右边设置flex:auto;来实现两列布局。  

 这里不多对flex布局介绍,有兴趣的可以看一下

阮一峰老师的这篇博客:flex布局

这里是代码链接:flex布局实现两列布局

  • calc实现两列布局

  这是css3里面的新属性,兼容性还可以,在ie9+、FF4.0+、Chrome19+、Safari6+都得到了支持。  

 通过calc可以使用百分比、em、px和rem单位值计算出其宽度或者高度,这样就不用考虑div值到底是多少。所以可以对右边div设置width:calc(100%-100px);来实现自适应布局。

代码链接:calc实现两列布局

  • 浮动+margin负值来实现

 这是之前写ife任务的时候在一篇博客上看到的。

 实现方法是给右边的div外面再套上一个父div,然后让父div的宽度设为100%。
对父div和左边的div都设置左浮动,再让左div的margin-left:-100%,右div设置margin-left:左div的宽度。
这样就实现了自适应布局,当然左右div的前后顺序要反过来。

具体看代码:margin负值实现自适应

三列自适应布局

除了常见的两列布局,我们也经常能够见到三列布局,左右固定,中间自适应。

 (这里只是拿这张图举个例子,w3school官网是三列固定布局)
  • 浮动实现三列布局

  这个类似两列布局的浮动,对左右div分别设置左右浮动,中间div设置margin-left和margin-right来实现,当然在html中的顺序应该是左右中。

代码链接:浮动实现三列布局

  • margin负值实现三列布局

  原理同margin负值实现两列布局,不多说了。

直接上代码:margin负值实现三列布局

  • flex实现三列布局

 和flex两列布局一个原理,对两边设置flex:0 0 100px,中间设置flex:auto。

代码代码:flex实现三列布局

css中的那些布局的更多相关文章

  1. CSS中常见的布局

    一.css中常见的布局有哪些? (1)两列布局 (2)三列布局 (3)弹性布局 (4)圣杯布局 (5)双飞翼布局 二.具体实现  (1)两列布局 https://www.cnblogs.com/qin ...

  2. 图文详解前端CSS中的Grid布局,你真的可以5分钟掌握

    前言 网站的布局是一个网站设计的根本,CSS的Grid布局已经成为了未来网站布局的基本方式. 今天这篇文章我们通过图文,一起看看如何自己实现Grid布局方式. CSS 第一个Grid布局 首先我们看看 ...

  3. css 中的grid布局基础

    CSS Grid Layout为CSS引入了一个二维网格系统.网格可用于布局主要页面区域或小型用户界面元素. 网格是一组交叉的水平和垂直线 - 一组定义列,其他行.元素可以放在网格上,以行或者列为标准 ...

  4. css 中 stick footer 布局实现

    做项目中,我们在写弹框的时候,不管弹框的内容多或者少,可能需要一些内容需要固定在框底部,比如关闭按钮.stick footer 就是让 footer 元素固定在底部 当内容不足满屏时,footer 紧 ...

  5. css中的圣杯布局和双飞翼布局

    圣杯布局 布局要求: 三列布局,中间自适应,两边定宽 中间栏要在浏览器优先渲染 允许任意列的高度最高 用最简单的CSS.最少的HACK语句 解释说明: 1.min-width:700px是为了当页面缩 ...

  6. 使用css中的flex布局弹性手风琴效果

    不多说,直接上代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  7. CSS中的圣杯布局与双飞翼布局

    一,圣杯布局 1,什么是圣杯布局? 所谓圣杯布局就是用于实现一个两侧宽度固定,中间宽度自适应的三栏布局 2,构建圣杯布局的步骤: 2.1,添加一个容器,在这个容器中添加放三个盒子(左.中.右): 2. ...

  8. CSS中的flex布局

    1.flex 布局的概念 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为 Flex 布局,行内元素也可以通过 ...

  9. css中响应式布局中样式的代码书写方法

    代码示例:@media only screen and (min-width: 320px){ html { font-size: 8px !important; } .mulu-zi{ positi ...

随机推荐

  1. redis 安装启动及设置密码<windows>

    redis 1. 安装 1.1 下载解压包,直接解压到任意路径下即可 windows下载地址:ttps://github.com/MSOpenTech/redis/releases 2.启动 2.1 ...

  2. K-Means 算法(转载)

    K-Means 算法 在数据挖掘中, k-Means 算法是一种 cluster analysis 的算法,其主要是来计算数据聚集的算法,主要通过不断地取离种子点最近均值的算法. 问题 K-Means ...

  3. 3.2. 添加模板版本(Core Data 应用程序实践指南)

    为了不像3.1那样崩溃,修改模型之前先创建新的模型版本.添加之后,会生成一个新的xcdatamodel文件,并且跟原来的内容完全一样,这有意思了,但是不要删除原来旧版的模型.旧的模型有助于把原来持久化 ...

  4. iReport默认参数和变量的含义解析【转】

    iReport默认参数和变量的含义解析[转] http://uule.iteye.com/blog/775338 参考:http://blog.csdn.net/terryzero/article/d ...

  5. Target runtime Apache Tomcat v8.0 is not defined.

    Target runtime Apache Tomcat v8.0 is not defined. Window-Preference-MyEclipse-Targeted Runtimes,选择存在 ...

  6. loadrunner controller:集合点策略

    集合点只有在多用户并发运行的时候才能体现它的作用. Scenario ---> Rendezvous 打开集合点设置界面,如下图所示: 我们可以看到Vusers 列表框里有两个用户,这与我们设置 ...

  7. hadoop在windows下安装运行

    1.下载windows环境下编译的hadoop-2.7.2.x64win.zip 2.解压至D:\BigData\hadoop-2.7.2 3.修改D:\BigData\hadoop-2.7.2\et ...

  8. 数据流程redux学习(一)

    思考题: react+redux开发这么一个原型,要怎么开发? 整个redux流程的逻辑非常清晰,数据流是单向循环的,就像一个生产的流水线: store(存放状态) -> Container(显 ...

  9. 蓝桥网试题 java 基础练习 查找整数

    --------------------------------------------------------------------- 注意看清楚条件 别漏了 -1 -1 -1 --------- ...

  10. Myeclipse插件将wsdl生成java客户端代码

    一.建立webservice服务端: 1.新建一个web service project,名称为webservice_server截图如下,点击finish. 2.选择工程,点击右键,选择new-&g ...