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. 如何在断开ssh连接后仍然保持服务器正常运行程序

    问题描述:当SSH远程连接到服务器上,然后运行一个Python程序(bpr.py),然后把终端开闭(切断SSH连接)之后,发现该程序执行中断. 解决方法:使用nohup命令让程序在关闭窗口(切换SSH ...

  2. 注解的基本盘点 -- 《Java编程思想》

    注解(元数据)为我们在代码中添加信息提供了一种形式化的方法,使我们可以在之后的某一个时刻非常方便地使用这些数据. ---<Java编程思想> 其实注解可以理解为一个工具类,只要使用了这个工 ...

  3. composer--------初体验，如何安装，如何下载

    最近PHP里面比较火的一款框架laravel,想学一下看下这个框架到底哪里好.这款框架的中文官网激励推荐composer,没办法就去学了一些composer.结果整了半天,还不如看一段短视频学的容易. ...

  4. CentOS7使用无线网卡

    1.安装CentOS7最小化时候,在网络连接功能项中设置WIFI的设备和密码. 2.进入系统,执行nmcli查看使用NetworkManager管理的网络 [root@seastar ~] nmcli ...

  5. TypeError: unsupported operand type(s) for |: 'str' and 'str'

    问题描述:

  6. CAN总线抓包

    马六: 由此可见, 马6的7e9跟7e8反馈的数据差不太多. 而标志508反馈的情况则不同, 波箱跟发动机反馈完全不同: 宝马3的数据如下: 证明宝马也有7e8跟7ec, 但是貌似7e8是主流啊... ...

  7. adpatch options=hotpatch

    --no need to shutdown application and no need to enable maintenance mode adpatch options=hotpatch fi ...

  8. 使用percona-toolkit校验主从数据的一致性

    主从数据校验使用percona-toolkit工具集的以下两个工具(主库上使用): pt-table-checksum  #检查主从数据是否一致, pt-table-sync #把主库数据同步到从库 ...

  9. java语言的认识

    class Hello{ public static void main(String [] args) { System.out.println("Hello Word 你好") ...

  10. zigbee学习之路(四):按键控制(中断方式)

    一.前言 通过上次的学习,我们学习了如何用按键控制led,但是在实际应用中,这种查询方式占用了cpu的时间,如果通过中断控制就可以解决这个问题,我们今天就来学习按键控制的中断方式. 二.原理分析 传统 ...