方法一：浮动布局

这种方法我采用的是左边浮动，右边加上一个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. Day01:Python入门

    一.编程与编程语言 编程的目的是将人类的思想流程按照某种能够被计算机识别的表达方式传递给计算机,从而让计算机能像人脑一样自动执行工作. 能被计算机所识别的表达方式是编程语言,python就是一门编程语 ...

  2. 1.1-1.3 HBase入门

    一.HBASE入门 部分参考链接:https://www.cnblogs.com/steven-note/p/7209398.html 1.简介 HBase – Hadoop Database,是一个 ...

  3. 20个Flutter实例视频教程-第06节: 酷炫的路由动画-2

    博客地址: https://jspang.com/post/flutterDemo.html#toc-94f 视频地址: https://jspang.com/post/flutterDemo.htm ...

  4. easyui更改messager的OkCancel按钮为（中文）确定取消

    jquery-easyui默认情况下,消息框的按钮文字是英文的OK  Cancel,但可以通过提供的方法进行修改,如: $.extend($.messager.defaults,{ ok:" ...

  5. AttributeCollection.Add(String, String) Method

    <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...

  6. Fitnesse的一个简单实例

    Fixture 代码 package eg; import org.joda.time.DateTime; public class JodaTime { int year; public Strin ...

  7. [Xcode 实际操作]八、网络与多线程-(10)使用异步Get方式查询GitHub数据

    目录:[Swift]Xcode实际操作 本文将演示如何通过Get请求方式,异步获取GitHub资源的详细信息. 异步请求与同步请求相比,不会阻塞程序的主线程,而会建立一个新的线程. 在项目导航区,打开 ...

  8. mysql 配置大小写敏感后不能重启

    [问题现象] 在mysql的配置文件my.cnf配置lower_case_table_names=1后不能重启mysql,提示mysql.serviceJob for mysql.service fa ...

  9. java面试基础问题

    1.一个".java"源文件中是否可以包括多个类(不是内部类)?有什么限制? 可以有多个类,但只能有一个public的类,并且public的类名必须与文件名相一致. 2.Java有 ...

  10. hdu 6319 Problem A. Ascending Rating （2018 Multi-University Training Contest 3）

    #include <stdio.h> #include <iostream> #include <cstdlib> #include <cmath> # ...