Css三栏布局自适应实现几种方法

自适应实现方法我们可以从三个方法来做，一个是绝对定位 ,自身浮动法 和margin负值法了，下面我们一起来看看这三个例子吧，希望例子能帮助到各位同学。

绝对定位法三栏布局自适应：

代码如下

复制代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位法</title>
<style>
 .parent{
  margin:auto;
  background:#09F;
  position:relative;
 }
 .left{
  width:200px;
  height:200px;
  background:#369;
  position:absolute;
  left:0;
  top:0;
 }
 .right{
  width:250px;
  height:200px;
  background:#C0C;
  position:absolute;
  right:0;
  top:0;
 }
 .center{
  background:#F00;
  margin:0 250px 0 200px;
  height:200px;
 }
</style>
</head>
<body>
<div class="parent">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

说明：三个div元素可以互换位置。

自身浮动法三栏布局自适应:

代码如下

复制代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自身浮动法</title>
<style>
 .parent{
  margin:auto;
  background:#09F;
 }
 .left{
  width:200px;
  height:200px;
  background:#369;
  float:left;
 }
 .right{
  width:250px;
  height:200px;
  background:#C0C;
  float:right;
 }
 .center{
  background:#F00;
  margin:0 250px 0 200px;
  height:200px;
 }
</style>
</head>
<body>
<div class="parent">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>
</body>
</html>

说明：.center所在的div必须在.left和.right之后出现,.left和.right可以互换位置。

margin负值法三栏布局自适应：

代码如下

复制代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>margin负值法</title>
<style>
 .parent{
  margin:auto;
  background:#09F;
 }
 .left{
  width:200px;
  height:200px;
  background:#369;
  margin-left:-100%;
 }
 .right{
  width:250px;
  height:200px;
  background:#C0C;
  margin-left:-250px;
 }
 .center{
  background:#F00;
  width:100%;
 }
 .main{
  margin:0 250px 0 200px;
  height:200px;
 }
 .fl{
  float:left;
 }
</style>
</head>
<body>
<div class="parent">
    <div class="center fl">
        <div
class="main">Main</div>
    </div>
    <div class="left fl"></div>
    <div class="right fl"></div>
</div>
</body>
</html>

说明：.main为中间主题部分，放到最前面，优先加载；.main外面必须有元素包裹，且宽度为100%；

Css三栏布局自适应实现几种方法的更多相关文章

  1. css三栏布局方案整理

    日常开发中,经常会用到css三栏布局,现将工作中常用的css 三栏布局整理如下: 什么是三栏布局: 三栏布局,顾名思义就是两边固定,中间自适应. 一. float布局 <!DOCTYPE htm ...

  2. 三种方法实现CSS三栏布局

    本文由云+社区发表 作者:前端林子 本文会分别介绍三种CSS实现三栏布局的方法,可在浏览器中打开查看效果 1.方法一:自身浮动的方法 实现方法:需要左栏向左浮动,右栏向右浮动,中间设左右margin来 ...

  3. CSS三栏布局的四种方法

    总括: 不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具 ...

  4. CSS三栏布局

    一.绝对定位 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  5. CSS 三栏布局入门

    首先,我是CSS盲[只听说过box model],没动手实践过,关于margin padding只知名称,不明细节.刚看过一叶斋大哥关于css布局的博文,再动手实践,动手记录下点滴积累以备后用. &l ...

  6. CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局

    圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局 虽然两者的实现方法略有差异,不过都遵循了以下要点: 1.两侧宽度固定 ...

  7. css高度已知，左右定宽，中间自适应三栏布局

    css高度已知,左右定宽,中间自适应三栏布局: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  8. CSS实现三栏布局(5种)

    常见的布局方式: float布局.Position定位.table布局.弹性(flex)布局.网格(grid)布局 那么我们就是用以上5种方式完成三栏布局,不过前提是左右宽度(假如左右宽度为300px ...

  9. 如何用CSS实现中间自适应，两边定宽三栏布局

    1.前言 用css实现“两边定宽,中间自适应的三栏布局”这个问题应该是在前端面试中被面试官提问到的高频问题了,一般当面试者写出一种实现方法之后,面试官还会问你还有没有别的方法,尽量多的写出几种实现方法 ...

随机推荐

  1. Jenkins 安装与使用--实例

    參考了博客Jenkins master在windows上安装 Jenkins的主要功能是监视反复工作的运行,比如软件project的构建详细地: *软件的持续构建和測试 本质上提供了一个易于使用的持续 ...

  2. Chrome插件-把网页图片上传到七牛空间一

    功能:图片上右键,点击上传图片到七牛,把图片上传的指定空间并返回图片URL. Chrome插件本质就是js代码,但是里面有一些限制,比如事件绑定等和普通js的绑定是有区别的,主要是为了安全性考虑. 做 ...

  3. ObjectMapper处理从远程获取的Object对象 （http://bbs.csdn.net/topics/390337813?page=1）这个网址也有讲解

    微服务中从其他服务获取过来的对象,如果从Object强转为自定义的类型会报错,利用ObjectMapper转换. ObjectMapper mapper = new ObjectMapper(); D ...

  4. GridLayout with span

    Widgets can span multiple columns or rows in a grid. In the next example we illustrate this. #!/usr/ ...

  5. javaSE知识点汇总

    Java基础知识精华部分   写代码: 1,明确需求.我要做什么? 2,分析思路.我要怎么做?1,2,3. 3,确定步骤.每一个思路部分用到哪些语句,方法,和对象. 4,代码实现.用具体的java语言 ...

  6. android 自己定义组合控件

    自己定义控件是一些android程序猿感觉非常难攻破的难点,起码对我来说是这种,可是我们能够在网上找一些好的博客关于自己定义控件好好拿过来学习研究下,多练,多写点也能找到感觉,把一些原理弄懂,今天就讲 ...

  7. pageEncoding和ContextType区别

    http://blog.csdn.net/kerrywang/article/details/4454895 pageEncoding        在JSP标准的语法中,如果 pageEncodin ...

  8. jQuery常用方法一览及JQuery选择器获取表格中按钮所在行的其他列值

    Attribute: $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式$(”img”).attr({src:”test.jpg”,alt:”test Image”}); ...

  9. Java面试题无答案

    写在前面:这篇文章里面总结了很多Java相关的知识,基本上应该算是每个Java程序员必须会的一些知识,所以,也就是很多面试官喜欢拿来考的一些东西.总结他们第一个目的是自己能够经常拿出来看一看,第二个也 ...

  10. AutoFac文档13（转载）

    目录 开始 Registering components 控制范围和生命周期 用模块结构化Autofac xml配置 与.net集成 深入理解Autofac 指导 关于 词汇表 属性注入 属性注入使用 ...