<style>
*{
padding: 0;
margin: 0;
} #left{
float: right;
width: 100%;
height: 300px;
} #box{
margin-right:220px;
background-color: pink;
height: 300px;
}
#right{
float: right;
margin-right: -100%;
width: 200px;
height: 300px;
background-color: yellow;
}
</style>
<div>
<div id="left">
<div id="box"></div>
</div> <div id="right" ></div>
</div>

【HTML+CSS】右侧固定,左侧自适应布局的更多相关文章

  1. CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)

    经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...

  2. CSS百分比padding实现比例固定图片自适应布局

    一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比 ...

  3. 使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)

    来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...

  4. 关于使用rem单位、css函数calc()进行自适应布局

    一.关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单 ...

  5. CSS 负边距自适应布局

    单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head>     <meta charset="UTF-8"& ...

  6. CSS负边距自适应布局三例

    单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset=”UTF-8″> <title& ...

  7. css负边距自适应布局

    单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> ...

  8. css实现九宫格图片自适应布局

    我之前写九宫格自适应布局的时候,每个格子是使用媒体查询器(@media)或者js动态设置css,根据不同的手机屏幕宽度,适配不同手机,但是这样有个很大的缺点,那就是移动端的屏幕尺寸太多了,就得写很多代 ...

  9. css实现三栏自适应布局(两边固定,中间自适应)以及优缺点

    方法一:绝对定位(absolute + margin) 原理:给左右两边的元素设置absolute,这样左右两边的元素脱离标准文档流的控制,中间的元素自然会上来,然后给中间的元素设置margin留出左 ...

随机推荐

  1. np.tile 和np.newaxis

    output   array([[ 0.24747071, -0.43886742],   [-0.03916734, -0.70580089],   [ 0.00462337, -0.5143158 ...

  2. 字符串分割(C++)(转载)

    转载出自:http://www.cnblogs.com/MikeZhang/archive/2012/03/24/MySplitFunCPP.html 经常碰到字符串分割的问题,这里总结下,也方便我以 ...

  3. MFC使用MsComm做串口通信

    一.注册MSCOMM 1.下载控件MSCOMM32.OCX(32位),mswnisck.ocx(64位) 2.把这个ocx文件放在c盘WIndows的system32里,打开cmd执行:regsvr3 ...

  4. MySQL命令行导出、导入数据库,备份数据库表

    MySQL导出数据库/数据表 1.首先,将你MySQL安装目录,例如C:\Program Files\MySQL\MySQL Server 5.7\bin添加到你的系统环境变量PATH中: 2.导出数 ...

  5. [BZOJ1196][HNOI2006]公路修建问题 二分答案+最小生成树

    Description OI island是一个非常漂亮的岛屿,自开发以来,到这儿来旅游的人很多.然而,由于该岛屿刚刚开发不久,所以那 里的交通情况还是很糟糕.所以,OIER Association组 ...

  6. 【Coursera】Technology :Fifth Week(1)

    Store and Forward Networking 在长途连接中,路由的数量 取决于 最优路径(花费最少).也就是说被地理条件所限制. 所以 Store and Forward Networki ...

  7. NS3 MyApp Class Reference

    官方文档:MyApp 可以在下面的几个例子找到: examples/tutorial/fifth.cc examples/tutorial/seventh.cc examples/tutorial/s ...

  8. 初识C++继承

    先是自己凭借自己在课堂上的记忆打了一遍.自然出了错误. //编译错误 #include <iostream> #include <cstdlib> using namespac ...

  9. C# String.Join 与 StringBuilder 对比,谁更快

    String.Join 文档      StringBuilder 文档 这两天刷 Leedcode 做到一道 String 的题时突然想到这俩对比的问题,于是查了一下资料并简单对比了一下. 首先对于 ...

  10. 学习mybatis-3 step by step 篇四

    日志 Mybatis内置的日志工厂提供日志功能,具体的日志实现有以下几种工具: SLF4J Apache Commons Logging Log4j 2 Log4j JDK logging 具体选择哪 ...