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. Ajax例子，views返回，html接收数据

    Ajax例子,views返回,html接收数据 views from django.shortcuts import render,HttpResponse,render_to_response im ...

  2. 时光煮雨 Unity3D实现2D人物动画① UGUI&Native2D序列帧动画

    系列目录 [Unity3D基础]让物体动起来①--基于UGUI的鼠标点击移动 [Unity3D基础]让物体动起来②--UGUI鼠标点击逐帧移动 时光煮雨 Unity3D让物体动起来③—UGUI DoT ...

  3. Leetcode: Partition Equal Subset Sum

    Given a non-empty array containing only positive integers, find if the array can be partitioned into ...

  4. jquery validate 自定义验证方法

    query validate有很多验证规则,但是更多的时候,需要根据特定的情况进行自定义验证规则. 这里就来聊一聊jquery validate的自定义验证. jquery validate有一个方法 ...

  5. PHP安全性

    一.防sql注入 用户通过输入完整的字符,来和sql语句拼接成带有破坏性的sql语句,服务器执行该语句,造成破坏. 1使用mysql_real_escape_string()过滤数据,该方法在未来版本 ...

  6. 重新安装了mysql，以前的数据库如何导入到新的数据库

    重新安装了mysql,以前的数据库如何导入到新的数据库,导入到新的数据库不能用真么办? 将之前的mysql中的data目录中的数据库文件夹,(需要哪个数据库复制哪个,不要都复制) D:/wamp/bi ...

  7. SVN使用教程总结

    SVN简介: 为什么要使用SVN? 程序员在编写程序的过程中,每个程序员都会生成很多不同的版本,这就需要程序员有效的管理代码,在需要的时候可以迅速,准确取出相应的版本. Subversion是什么? ...

  8. UCenter整合登陆时出现’Authorization has expired’错误（2014-03-13记）

    原因之可能是两台机子的时间不一致导致.

  9. MMAP和DIRECT IO区别【转】

    转自:http://www.cnblogs.com/zhaoyl/p/5901680.html 看完此文,题目不言自明.转自 http://blog.chinaunix.net/uid-2710571 ...

  10. JavaScript脚本语言基础（四）

    导读: JavaScript和DOM DOM文档对象常用方法和属性 DOW文档对象运用 JSON数据交换格式 正则表达式 1.JavaScript和DOM [返回] 文档对象模型(Document O ...