方法一：浮动布局

这种方法我采用的是左边浮动，右边加上一个margin-left值，让他实现左边固定，右边自适应的布局效果

HTML Markup 

<div id="left">Left sidebar</div>

  <div id="content">Main Content</div>

CSS Code

<style type="text/css">

            *{

                margin: 0;

                padding: 0;

            }

            #left {

                float: left;

                width: 220px;

                background-color: green;

            }

            #content {

                background-color: orange;

                margin-left: 220px;/*==等于左边栏宽度==*/

            }

        </style>

上面这种实现方法最关键之处就是自适应宽度一栏“div#content”的“margin-left”值要等于固定宽度一栏的宽度值，大家可以点击查看上面代码的DEMO

方法二：浮动和负边距实现

这个方法采用的是浮动和负边距来实现左边固定宽度右边自适应宽度的布局效果，大家可以仔细对比一下上面那种实现方法，看看两者有什么区别：

HTML Markup

<div id="left">

            Left Sidebar

        </div>

        <div id="content">

            <div id="contentInner">

                Main Content

            </div>

        </div>

CSS Code

*{

            margin: 0;

            padding: 0;

        }

        #left {

            background-color: green;

            float: left;

            width: 220px;

            margin-right: -100%;

        }

        #content {

            float: left;

            width: 100%;

        }

        #contentInner {

            margin-left: 220px;/*==等于左边栏宽度值==*/

            background-color: orange;

        }

这种方法看上去要稍微麻烦一点，不过也是非常常见的一种方法，大家可以看看他的DEMO效果。感觉一下，和前面的DEMO有什么不同之处。

我在这里就只展示这两种方法，大家肯定还有别的实现方法，我就不在多说了

左侧自适应，右侧200px/

  1. <!-#right必须在#left之上-->

  2. <div id="right"></div>
  3. <div id="left"></div>
  4. 必须注意前后顺序

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

                        #left

                        {

                                height:100px;

                                margin-right:200px;

                                background-color:green;

                        }

                        #right

                        {

                                height:100px;

                                width:200px;

                                float:right;

                                background-color:red;

                        }

</style>

</head>

<body>

              <!-#right必须在#left之上-->

<div id="right"></div>

<div id="left"></div>

</body>

</html>

#right在#left之下时,由结果看来，设置float和position:absolute的元素会脱离文档流，其他周围元素会忽视它，而移动自身位置。故浮动或绝对定位的元素只影响位于其后的元素，其前的元素会不受影响。另外，浮动框的移动是基于原始位置左右移动，而不会上下移动，直到遇到另一浮动框的边缘或者包含框。而div正常会占据一整行。

先后顺序也好理解总结为，两列的，浮动的放前面，不然正常div放前面自动占据一行了、

全新的资料的第三种技术

<!-- 以上代码的关键技术部分可以表述为：将一个宽度为100%的div的外边距（left-margin or right-margin）设置为某个负值，然后将其第一个子div的外边距（与父容器的边距同方向）设置为对应的正值，那么这个div就可以浮动并且自适应浏览器宽度。 -->

第2种方法：左侧同样用margin-right  右侧采用绝对定位 如下代码所示：

HTML代码如下：

<div class="bd">

        <div class="bd-left">

            <a href="" target="_blank">我是龙恩</a>

        </div>

        <div class="bd-right">

            <a href="" target="_blank">我是龙恩</a>

        </div>

    </div>

CSS代码如下：

.bd{position:relative;}

 .bd-left{height:300px;;margin-right:300px;background:#DDD;}

 .bd-right{width:300px;height:300px;position:absolute;top:0;right:0;background:#AAA;}

关于自适应布局的处理(利用浮动和margin负边距实现)

自适应布局主要是浮动圣杯布局也叫双飞翼布局，主要是利用浮动和margin负边距实现的，希望大家能够很好

的理解下面的几个例子，绝对定位布局也是非常的简单了

右边固定，左边自适应

，左边固定右边自适应

当且仅能这样、不太一样

css布局：左边固定宽度，右边自适应宽度或右侧固定，左侧自适应三种方法的更多相关文章

  1. CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)

    经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...

  2. HTML5结合CSS的三种方法+结合JS的三种方法

    HTML5+CSS: HTML中应用CSS的三种方法 一.内联 内联样式通过style属性直接套进HTML中去. 示例代码 <pstylepstyle="color:red" ...

  3. 你不知道的css高级应用三种方法——实现多行省略

    前言 这是个老掉牙的需求啦,不过仍然有很多人在网上找解决方案,特别是搜索结果排名靠前的那些,都是些只会介绍兼容性不好的使用-webkit-line-clamp的方案. 如果你看到这篇文章,可能代表你正 ...

  4. CSS围住浮动元素的三种方法

    浮动元素脱离了文档流,其父元素看不到它了,因而不会包围它.浮动会“扩散”到下一个清除浮动的元素处.这会引起不想要的页面布局效果. 清除浮动的方法有三种: 1.父元素overflow:hidden 2. ...

  5. css - 三种方法解决LI和内部Img的上下间距问题

    在火狐浏览器和谷歌浏览器(qq浏览器,谷歌内核)bug类似这张图: img的高度是190*127 但是放到li中,li并没有设置高度,却和内部的图片之间上下错位. 若强行给li设置高度127,他和im ...

  6. 为IE单独写CSS的三种方法

    本文由 Kayo Lee 发表,本文链接:http://kayosite.com/the-methods-make-css-only-for-ie.html 因为万恶的 IE 存在各种的不标准,因此, ...

  7. CSS实现导航条Tab的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  8. CSS实现导航条Tab切换的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  9. html布局 左右固定，中间只适应，三种方法实现

    html布局 左右固定,中间只适应,三种方法实现 使用自身浮动法定位 //html <h3>使用自身浮动法定位</h3> <div id="left_self& ...

随机推荐

  1. sql语句之约束条件

    not null约束,需设置默认值 sex enum('male','female') not null default 'male' unique 约束,值唯一 单列唯一: create table ...

  2. 【Data Structure & Algorithm】字符串全排列

    字符串全排列 题目:输入一个字符串,打印出该字符串的所有排列.例如输入字符串abc,则输出由字符a.b.c所能排列出来的所有字符串abc.acb.bac.bca.cab.cba. 分析:考察对递归的理 ...

  3. Uploadify API在项目上的应用

    在项目开发中,前端使用easyui,jq的时候,我么涉及到导入的时候都要用到这个上传插件,用法是: 1:先初始化上传控件 2:打开导入的easyui dialog弹出框,dialog里面将上传的inp ...

  4. java8--List转为Map、分组、过滤、求和等操作

    利用java8新特性,可以用简洁高效的代码来实现一些数据处理~ 定义1个Apple对象: public class Apple { private Integer id; private String ...

  5. 《剑指offer》面试题13—O(1)时间删除链表结点

    题目:给定单向链表的头指针和某结点指针,实现函数在O(1)时间内删除指定节点. 思路:由于没有要删除结点(j结点)的前一个结点(i结点)指针,通常想法是从头开始遍历找到指定结点的前一个结点(i结点), ...

  6. Linux whereis 搜索命令位置

    在学习 兄弟连 linux教学视频 的时候,我将所学的 linux 命令记录在我的博客中,方便自己查阅. 文件搜索命令: whereis 基础的命令 命令名称:whereis 命令的所在路径:/usr ...

  7. IOS11 - UINavigationItem大标题，搜索栏实现

    1.新建模型 class Contact: NSObject { var name : String? var mobile : String?{ didSet{ { mobileString = m ...

  8. Codevs 3134 Circle

    3134 Circle 题目描述 Description 在一个圆上,有2*K个不同的结点,我们以这些点为端点,连K条线段,使得每个结点都恰好用一次.在满足这些线段将圆分成最少部分的前提下,请计算有多 ...

  9. [Xcode 实际操作]九、实用进阶-(27)字符串文件(Localizable.strings)的本地化

    目录:[Swift]Xcode实际操作 本文将演示字符串文件(Localizable.strings)的本地化. 在项目[DemoApp]文件夹下点击鼠标右键,弹出右键菜单 ->[New Fil ...

  10. [Xcode 实际操作]九、实用进阶-(32)项目的打包上传和提交审核以及下架处理

    目录:[Swift]Xcode实际操作 本文将演示如何将一个应用程序进行打包上传,并提交审核以及下架处理. 点击项目[DemoApp]->[Build Settings]编译设置->[Pr ...