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. JQuery选择器转义说明

    JQuery选择器 JQuery选择器规则, 借用了css1-3的规则(css选择器规则), 因为css本身也需要一套规则来索引DOM元素, 进而进行样式渲染,例如div.blue 表示目标DOM为 ...

  2. jq html 页面点击图片直接上传

    <form id="ff" method="post" enctype="multipart/form-data" style=&qu ...

  3. 服务器IP地址后修改SQL Server配置

    1. 修改TCP/IP 属性的IP 地址 修改该实例的协议.修改TCP/IP协议的属性,将IP地址更新为当前的最新IP 地址.然后重启该实例. 2.查看全部侦听再检查SQL Server 实例的TCP ...

  4. Groovy学习笔记（二）

    在上一篇文章中我们主要学习了如何搭建Groovy开发环境,为我们的Groovy之旅做好了准备工作,不知道你是否准备好了?接下来我们就一起看看Groovy与我们熟悉的Java有什么异同. Groovy是 ...

  5. 折纸问题java实现

    /** * 折纸问题 这段代码写的太low了 本人水平有限 哎... 全是字符串了 * @param n * @return * @date 2016-10-7 * @author shaobn */ ...

  6. c#与.net的简介

    c语言诞生于上世纪60年代,后来诞生了面向对象的c++,后来出现看更为精简的java,微软之后又出了c#语言.早期的c#语言和java语言类似.经过长足的发展,c#变得越来越完美. 面向对象 简单,安 ...

  7. SQL批量添加主键脚本

    --SQL批量添加主键脚本 --操作提示:运行此脚本前请记得备份您要操作的数据库 --实现功能:执行脚本后数据库中的所有数据表都会有一个主键 --添加规则1:主键名称为ID(可自己修改),数据类型为整 ...

  8. IE7 float:left失效的解决方法

    <div id="a" style="width:500px"> <div id="b" style="widt ...

  9. Dynamics AX 2012 R2 耗尽用户

    有时,你想执行一些操作,但是这些操作必须让所有用户都登出后才能执行,例如加强安全设置,创建虚拟公司等.这时,你可以使用系统的耗尽用户(Darin Users)功能.下面跟随Reinhard一起,设置耗 ...

  10. 【转】Struts1.x系列教程（7）：Logic标签库

    转载地址:http://www.blogjava.net/nokiaguy/archive/2009/01/archive/2009/01/archive/2009/01/archive/2009/0 ...