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. T-SQL with关键字

    T-SQL with关键字   Select字句在逻辑上是SQL语句最后进行处理的最后一步,所以,以下查询会发生错误: SELECT YEAR(OrderDate) AS OrderYear, COU ...

  2. 开源工作流CCBPM中关于解决谷歌等浏览器silverlight的问题

    CCBPM的流程设计器和表单设计器.是通过silverlight实现的. 有些用户和学习者在安装完CCFlow,执行流程设计器时,常常会出现提示安装silverlight.明明已经安装了,为什么还会出 ...

  3. 我的第一段ionic代码

    ionic是基于angularjs的前端框架,用于实现移动app. 下面是第一段代码,先贴代码,有时间再整理: demo1.htm <!DOCTYPE html> <html ng- ...

  4. java中形参个数可变的方法使用

    public class Varargs { public static void main(String[] args) { test(3,"java","C++&qu ...

  5. react-router-dom Link search 传参

    <Link> 和之前版本没太大区别,重点看下组件属性: to(string/object):要跳转的路径或地址: replace(bool):为 true 时,点击链接后将使用新地址替换掉 ...

  6. java.lang.Void and void

    java.lang.Void is analogous to java.lang.Integer. Integer is a way of boxing values of the primitive ...

  7. LDAP编辑器 LDAPAdmin

    LDAPAdmin 是一个在 Windows 用来编辑 LDAP 账户信息的管理工具,采用 Delphi 开发.

  8. String的split()方法探索和大揭秘

    事实上没打算写这么一篇博文的,可是昨天在逛论坛的时候,发现一帖子,然后我又把帖子的内容在群里发了一通,结果出现了让人吃惊的结果,所以这里简单的给大家分享一下split()方法,免得大伙儿以后还会出现这 ...

  9. C#获取文件的md5

    上代码: //获取MD5 public static string GetMd5Hash(String input) { if (input == null) { return null; } MD5 ...

  10. windows 2003 如何实现远程桌面与本地桌面统一

    最近在使用XP对2003服务器进行远程管理的时候,发现远程桌面与本地桌面不一致,本身在本地桌面开启的程序例如杀毒软件防火墙之类的,在远程桌面居然看不到,同时在远程桌面开启的程序,跑到服务器本地桌面也看 ...