方法一：浮动布局

这种方法我采用的是左边浮动，右边加上一个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. ajax展示新页面同时传递参数

    HTML页面部分代码: <div id="course" hidden></div> HTML页面中ajax代码: var selectType=$(&qu ...

  2. 继承映射关系 joinedsubclass的查询

    会出现下面这样的错一般是配置文件中的mapping和映射文件中的package路径或者class中的name路径不一致 org.hibernate.MappingException: Unknown ...

  3. Grid++Report应用（引入项目中）

    1.将Grid++Report安装文件中(\WebSamples\asp.net(csharp)\App_Code)的ReportData.cs,MssqlReportData.cs两个文件复制到自己 ...

  4. E20180607-hm

    duplicate v. 重复; 复制; 复印;  adj. 复制的; 副本的; 完全一样的;        n. 副本; 完全一样的东西; 复制品; adjacent adj. 相邻; 邻近的,毗邻 ...

  5. HDU5950【矩阵快速幂】

    主要还是i^4化成一个(i+1)^4没遇到过,还是很基础的一题矩阵快速幂: #include <bits/stdc++.h> using namespace std; typedef lo ...

  6. POJ3737【数学】

    高中数学题?初中吧///然后注意一下POJ的double输出用%f.......... #include <iostream> #include <stdio.h> #incl ...

  7. CodeForces 623B【预处理+DP】

    题意: 给出n,a,b以及n个整数a1,a2-an, 可以对数组进行以下两种操作: (1)花费len*a的代价删除连续的len个数,len<|S| (2)花费b的代价将某一个a[i]加一或减一, ...

  8. Codevs 1293 送给圣诞夜的极光

    1293 送给圣诞夜的极光  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Description 圣诞老人回到了北极圣 ...

  9. IT兄弟连 JavaWeb教程 JSP经典面试题

    1．JSP标准提供了三种独立的向JSP添加Java代码的技术,请列举. <% %>JSP程序代码块,内部可以直接嵌入Java代码. <%! %>JSP声明区,内部可以声明变量和 ...

  10. 新装centos 6.5 基本配置

    开机自动联网 vi /etc/sysconfig/network-scripts/ifcfg-eth0; 将ONBOOT=no,改为ONBOOT=yes,保存退出 开机直接进入命令行模式 vi /et ...