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. kafka 生产者java编码

    public class KafkaProducerDemo { public static void main(String[] args) throws InterruptedException ...

  2. 前向后瞻正则表达式及其JS例子

    定义 x(?=y) 匹配'x'仅仅当'x'后面跟着'y'.这种叫做正向肯定查找. 比如,/Jack(?=Sprat)/会匹配到'Jack'仅仅当它后面跟着'Sprat'./Jack(?=Sprat|F ...

  3. MVC+EF 自定义唯一性验证

    最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精    本篇提供二种方法,希望大家喜欢 1.自定义验证属性 ...

  4. EBS R12.2应用层关闭脚本的执行过程

    $ pwd /app/oracle/apps/VIS/fs1/inst/apps/VIS_erptest/admin/scripts $ ./adstpall.sh apps/apps You are ...

  5. sdutoj 2151 Phone Number

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2151 Phone Number Time Li ...

  6. Eclipse in Ubuntu16.04LTS Final Beta

    #2016.03.30 在虚拟机Ubuntu16.04LTS上,用Eclipse编写运行Java,就目前而言,实在不是明智之举.卡顿极其厉害,还是在物理机上运行吧.那么继续Ubuntu的探索历程. 用 ...

  7. php生成随机数的三种方法

    php生成随机数的三种方法 如何用php生成1-10之间的不重复随机数? 例1,使用shuffle函数生成随机数. <?php$arr=range(1,10);shuffle($arr);for ...

  8. 关于Beta分布、二项分布与Dirichlet分布、多项分布的关系

    在机器学习领域中,概率模型是一个常用的利器.用它来对问题进行建模,有几点好处:1)当给定参数分布的假设空间后,可以通过很严格的数学推导,得到模型的似然分布,这样模型可以有很好的概率解释:2)可以利用现 ...

  9. 十六、Java基础---------集合框架之Set

    写在前面的话,这篇文章在昨天就写好了,今天打开的时候一不小心将第二天的文章粘贴到了这篇文章,很不幸的是除了标题之外依然面目全非,今天带着沉痛的心情再来写这篇文章! 上篇文章介绍了Collection体 ...

  10. 自定义属性 view

    首先自定义一个圆,相信以前的学习大家都会画圆,在values下写一些自定义的属性 package com.exaple.day01rikao; import android.content.Conte ...