1.实现左侧宽度固定，右侧全屏自适应。

body{margin:0;padding:0}

.wrap{ width:100%; float:left}

.content{ height:300px;background:green; margin-left:200px}

.right{ width:200px; height:300px; background:red; float:left; margin-left:-100%}

<body>

<div class="wrap">

    <div class="content">content</div>

</div>

<div class="right">aside</div>

</body>

2.实现左侧与右侧宽度固定，中间部分全屏自适应。

<style type="text/css">

body{margin:0;padding:0}

.wrap{ width:100%; float:left}

.content{ height:300px;background:green; margin-left:200px;margin-right:200px}

.left{ width:200px; height:300px; float:left; background:yellow; margin-left:-100%}

.right{ width:200px; height:300px; background:red; float:left; margin-left:-200px}

</style>

<body>

<div class="wrap">

    <div class="content">content</div>

</div>

<div class="left">aside</div>

<div class="right">aside</div>

</body>

css实现自适应宽度布局的更多相关文章

  1. RelativeLayout中的格局，自适应宽度布局

    RelativeLayout中的布局,自适应宽度布局 该图片中为android布局:总布局为 RelativeLayoutAtLeft 为居左 <TextView android:backgro ...

  2. 从三栏自适应宽度布局到css布局的讨论

    如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就 ...

  3. css两列自适应宽度布局（左定宽，右自适应）

    1.利用BFC: <div id="root"> <div class="left">左</div> <div cla ...

  4. CSS实现自适应九宫格布局 大全

    看到微博和朋友圈都实现了图片九宫格,曾经有次面试也问到了九宫格这个问题,当时想到的是先固定每个单元格的宽高,然后进行浮动.今天想折腾一下,实现自适应父元素宽度的布局.这次我只写了四种方式去实现九宫格, ...

  5. [转]css实现左侧宽度自适应，右侧固定宽度

    原文地址:https://segmentfault.com/a/1190000008411418 页面布局中经常用会遇到左侧宽度自适应,右侧固定宽度,或者左侧宽度固定,右侧自适应.总之就是一边固定宽度 ...

  6. CSS 圣杯布局升级版---多个固定宽度一个自适应宽度

    1.一个div固定,一个div自适应宽度.两种情况,固定在左或者在右. HTML: <div class="box1"> <div class="mai ...

  7. CSS如何实现”右部宽度固定，左部自适应“的布局

    吃过晚饭后,开始刷前端笔试题,却遇到了一道CSS难题——使用CSS实现左部自适应.右部固定宽度为200px的布局.当时第一眼看到题目时,以为只是一道很简单的题目.不就是定义两个左浮动的div,右部的宽 ...

  8. CSS流体(自适应)布局下宽度分离原则——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1463 一.简短的前言 ...

  9. CSS流体(自适应)布局下宽度分离原则

    CSS流体(自适应)布局下宽度分离原则 这篇文章发布于 2011年02月28日,星期一,00:48,归类于 css相关. 阅读 73990 次, 今日 5 次 by zhangxinxu from h ...

随机推荐

  1. C#基础知识大杂烩

    这样是调用父类中第二个有参的构造函数,如果去掉Base默认调用无参构造函数 注意执行顺序是:先调用父类的构造函数,然后再执行子类自己的构造函数. 父类: class Person { public P ...

  2. .net开发中要注意的事项

    1.尽量少用static 当对象被定义为static时,这个对象所占有的内存将不会被回收.有时我们会将经常调用的对象(变量)定义为static,以便提高程序的运行性能.所以,不常用的就不要再定义为st ...

  3. react 评论列表插入评论数据 unshift

    // unshift 新增数据放到最上面 //插入 回复/发表 评论else if(action.type === INSERT_COMMENT ){ let content = action.tex ...

  4. box-flex不均分问题

    解决box-flex不均等分的问题 我想当你上手css3的时候后一定为他的强大而感到震惊,但是震惊之后带来的一定是苦恼,因为他太TM变态了! 我之所以这么说是因为我今天写box-flex的时候遇到了一 ...

  5. Android之ViewHolder用法

    http://www.cnblogs.com/mengdd/p/3254323.html (zhuan) http://blog.csdn.net/mrzhang_happy/article/deta ...

  6. VS 编辑并继续（转载）

    转]Microsoft Visual Studio vs2008 vs2010 调试 编辑 修改 代码 在vs2008的文件菜单下,前两个菜单项分别是新建项目 和 新建网站. 这两项里,都可以建web ...

  7. 看门外汉如何实现：C#操作 MongoDB基本CURD的事务控制

    第一部分 基本设计 目前最新版本的C#驱动MongoDB-CSharpDriver-2.2.3,比之前的版本更新比较大,在网上很难找到这个版本的相关C#操作资料,以下都是个人自发研究.测试的,如有雷同 ...

  8. C#属性和变量的区别学习

    参考一   昨天看三层架构 (具体没怎么弄懂) 发现一般有一页代码专门用户存放字段的 而且都用用属性封装..令我诧异的是 很多字段属性都存在 get{}和set{} 和普通的变量没什么区别(可读可写) ...

  9. datagridview随窗体的大小而变，表格填满控件

    在C#winform布局的时候,我们拖一个datagridview到窗体上面,将datagridview调整为适合窗体的大小,但是我们运行之后,点击最大化按钮的时候,却发现datagridview的大 ...

  10. 错误，这个如何解决呢？内存溢出的问提。把JAVA_OPTS="-server -XX:PermSize=64M -XX:MaxPermSize=128m 还是不行

    java.lang.OutOfMemoryError: PermGen space at java.lang.ClassLoader.defineClass1(Native Method) at ja ...