<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. xShell终端中文乱码完全解决方法

    xShell终端中文乱码完全解决方法 xShell(xShell5)以及其他终端中文乱码的原因无非有三种:(1)Linux系统的编码问题:(2)xShell终端的编码问题: (3)两端的语言编码不一致 ...

  2. ELK之elasticsearch6.5

    官方网站:https://www.elastic.co/guide/en/elasticsearch/reference/current/rpm.html 这里采用rpm的方式安装: # wget h ...

  3. 20145336张子扬 《网络对抗技术》 PC平台逆向破解

    #20145336张子扬 <网络对抗技术> PC平台逆向破解 ##Shellcode注入 **基础知识** Shellcode实际是一段代码,但却作为数据发送给受攻击服务器,将代码存储到对 ...

  4. idata,xdata,pdata,code

    data       --->   可寻址片内ram bdata     --->  可位寻址的片内ram idata      --->   可寻址片内ram,允许访问全部内部ra ...

  5. Python数据分析入门之pandas基础总结

    Pandas--"大熊猫"基础 Series Series: pandas的长枪(数据表中的一列或一行,观测向量,一维数组...) Series1 = pd.Series(np.r ...

  6. 【问题解决】An internal error occurred during: "Computing additional info". Could not initialize class javax.crypto.JceSecurityManager

    在使用eclipse时对象后使用点操作符时总是会弹出错误,很是烦人 An internal error occurred during: "Computing additional info ...

  7. 【入门教程】kafka环境搭建以及基础教程

    问题导读 1.Kafka独特设计在什么地方?2.Kafka如何搭建及创建topic.发送消息.消费消息?3.如何书写Kafka程序?4.数据传输的事务定义有哪三种?5.Kafka判断一个节点是否活着有 ...

  8. 51nod 1413 权势二进制

    本来刚开始还是想用每一位 -1的个数 然后再乘以10  不断累加 后来发现 完全不是这回事啊  因为本身就是0 和 1 所以只要记录出现的最大的数字 就是答案  因为 n >= 1 // 所以不 ...

  9. opencv-python 学习初探2 去图片水印

    我要去除的水印是红色的.网上已经有很不错的帖子,我就不贴自己的代码了.留个指路自己以后查资料. 大概的思路就是用颜色拾取工具,拾取水印颜色,分析了图片,找到规律.比如我的图片水印是红色的,红色差不多g ...

  10. Python的替换函数——replace(),strip(),和re.sub()

    在Python中常用的三个"替换"函数是strip(),replace()和re.sub(),下面来讲讲这三个函数的用法. 一.replace() 基本用法:对象.replace( ...