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. CPU五级流水线project（带Hazard）

    project简单介绍: 计算机组成原理课程Project--五级流水线hazard处理 思路说明: CPU架构图: CPU指令集: 代码在这里:cpu_hazard

  2. RDLC 动态列

    很久没有写博客了,关于动态列,国内很少资料有介绍动态列的,所想写点心得给哥们 啥是动态列呢?通常我们用存储过程时有列转行和行转列的做法,那么在RDLC 怎么支持呢?其实很简单,就是利用了RDLC的 C ...

  3. Unity3D 播放视频

    http://blog.csdn.net/jbjwpzyl3611421/article/details/12780625 导入: 影片纹理是通过Apple QuickTime导入的(支持.mov, ...

  4. IOS手机使用Fiddler抓获HTTPS报文方法

    Configure Fiddler Click Tools > Fiddler Options > Connections. Click the checkbox by Allow rem ...

  5. iterator [ɪtə'reɪtə] 遍历器

    lterator 遍历器 遍历器是一种接口,它为不同的数据结构提供了统一的访问机制. 如果一个数据结构具有遍历器接口,那么就可以依次处理该数据结构的成员. 当前 javascript 用来表示集合的数 ...

  6. 重新安装Drupal？

    因个人需要需要重新安装Drupal.如何操纵呢?Drupal是在_drupal_bootstrap_database()函数里面检查是否已经安装过的.检查的依据是有没有$GLOBALS['databa ...

  7. 【LeetCode】99. Recover Binary Search Tree

    Recover Binary Search Tree Two elements of a binary search tree (BST) are swapped by mistake. Recove ...

  8. Android用http协议上传文件

    http协议上传文件一般最大是2M,比较适合上传小于两M的文件   [代码] [Java]代码   001import java.io.File;  002import java.io.FileInp ...

  9. FFMPEG，将字幕“烧进”MP4视频中

    原文地址:http://blog.csdn.net/ufocode/article/details/75475539 由于mp4容器,不像MKV等容器有自己的字幕流. MKV这种容器的视频格式中,会带 ...

  10. C# XMLOperate

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.X ...