第一种:左侧用margin-right,右侧float:right

CSS代码:

html,
body,ul,li
#wrapper {
width: 100%;
height: 100%;
padding:;
margin:;
} .left,
.right {
min-height: 500px;
border:;
} .left {
background-color: #999999;
margin-right: 151px; } /*左适应右固定第一种*/
.right {
background-color: #808080;
width: 150px;
float: right;
} .content {
background-color: #CCCCCC;
/*padding-right: 150px;*/
/*width: 100%;*/
} .content li{
float: left;
width: 150px;
}

html代码:

<div id="wrapper">
<div class="right">
右侧菜单
</div>
<div class="left">
<div class="content">
<ul>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
</ul>
</div>
</div> </div>
第二种:左侧同样用margin-right 右侧采用绝对定位

CSS代码(只需要把第一种注释部分替换即可):

/*左适应右固定第一种*/
/*.right {
background-color: #808080;
width: 150px;
float: right;
}*/ /*左适应右固定第二种(把上面的替换为改代码即可)*/
.right {
background-color: #808080;
width: 150px;
position: absolute;
top: 0px;
right: 0px;
}
第三种:左右都浮动 且 右侧用负margin值

CSS代码:

.wrap {
overflow: hidden;
background: #EEE;
} .wrap-right {
width: 300px;
/*position: relative;*/
float: right;
margin-left: -300px;
background: #AAA;
} .wrap-left {
width: 100%;
float: left;
} .left-con {
margin-right: 300px;
background: #DDD;
} .left-con,
.wrap-right {
height: 300px;
}

HTML代码:

<div class="wrap">
<div class="wrap-left">
<div class="left-con">
我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc
</div>
</div>
<div class="wrap-right">
<a href="" target="_blank">我是mmmmmm</a>
</div>
</div>

最终效果:

CSS 两列布局 之 左侧适应,右侧固定 3种方式的更多相关文章

  1. css布局--两列布局,左侧固定,右侧自适应(其中左侧要可以拖动,右侧水平滚动条)

    (css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...

  2. CSS两列布局——左侧宽度固定,右侧宽度自适应的3种方法

    1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  3. css两列布局,一边固定宽度,另一边自适应

    <!DOCTYPE HTML><HTML>    <head>                <meta charset="utf-8" ...

  4. CSS两列布局的N种实现

    一.什么是两列布局 两列布局分为两种,一种是左侧定宽.右侧自适应,另一种是两列都自适应(即左侧宽度由子元素决定,右侧补齐剩余空间).在CSS面试题里面属于常考题,也是一个前端开发工程师必须掌握的技能, ...

  5. css 两列布局中单列定宽单列自适应布局的6种思路

    前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...

  6. css两列布局之基于BFC规则实现

    css要实现常见的自适应两列布局的方式方法挺多. 这里讲的是利用设置overflow不为visible时会形成新的BFC来实现.至于什么是BFC,可以搜搜看先,基本都讲的差不多了.等有更多空余时间,专 ...

  7. CSS两列布局的多种方式

    两列布局(一侧固定宽度,一侧自适应),在工作中应该是经常使用到,可以说是前端基础了.这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题.很有必要掌握以备不时之需.这里总 ...

  8. div 两列布局,左侧固定宽度px,右侧自适应宽度,满屏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  9. CSS两列布局

    方法1:左边设置绝对定位,右边设置左外边距,大小和左边的宽度相等 //CSS部分: .contain{ position :relative; height: 300px; } .left{ posi ...

随机推荐

  1. 使用JS,获取URL中指定参数的值

    /** * 获取URL中指定参数的值 * * @param name 参数名称 * @returns */ function getQueryString(name) { var reg = new ...

  2. [译]flexbox全揭秘

    原文:http://css-tricks.com/snippets/css/a-guide-to-flexbox/ 弹性布局(弹性盒子,现今仍是w3c的候选推荐),目标在于,对于一个容器中的各个项目块 ...

  3. DI中Transient Scoped Singleton Instance的区别

    Observe which of the OperationId values varies within a request, and between requests. Transient obj ...

  4. mvc添加多条数据到数据库

    from : http://www.th7.cn/Program/net/201502/387849.shtml mvc的视图太强大了,个人刚刚接触.(初级菜鸟,懂的不多,往大神们指点)需求是,客户点 ...

  5. Netty入门学习

    一.他山之石 Netty实现原理浅析 http://www.importnew.com/15656.html netty线程模型 http://www.infoq.com/cn/articles/ne ...

  6. 有哪些经常被误用的 HTML、JavaScript、CSS 的元素、方法和属性?

    一,以前想要把一个元素(input 之类的)设成只读的时候都是用 disabled,后来发现这是不对的. 因为在 HTML 里面,如果一个元素被设置成 disabled, 那么它的值就不会被发送到 s ...

  7. laravel强大功能路由初探(二)

    目标当然是先输出helloworld 配置hosts文件和apache下的httpd-vhosts.conf, hosts:127.0.0.1  www.blog.com httpd-vhosts.c ...

  8. GSM07.10协议中串口复用的注意事项

    DLCI:0通道(地址域中DLCI==0)是控制通道,用来传输管理信息.逻辑通道的建立和关闭,睡眠模式的启动和唤醒,流量控制等控制信息都是用该通道. DLCI:1~n通道是逻辑通道,用来传输用户数据. ...

  9. js作用域之常见笔试题,运行结果题

    笔试题中经常有运行结果题,而大多体型都是围绕作用域展开,下面总结了几种相关的题: 外层的变量函数内部可以找到,函数内部的变量(局部变量)外层找不到. function aaa() { var a = ...

  10. BZOJ 1236: SPOJ1433 KPSUM

    Description 用+-号连接1-n所有数字的数位,问结果是多少. Sol 数位DP. \(f[i][j][0/1][0/1]\) 表示长度为 \(i\) 的数字,开头数字是 \(j\) ,是否 ...