<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. Eclipse启动Tomcat时,45秒超时解决方式

    Eclipse启动Tomcat时,45秒超时解决方式 在Eclipse中启动Tomcat服务器时,经常由于系统初始化项目多,导致出现45秒超时的Tomcat服务器启动错误.  一般通过找到XML配置文 ...

  2. ELK之elasticsearch6.5

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

  3. KEIL中常见问题

    1:..\Obj\phone.axf: Error: L6218E: Undefined symbol err (referred from gprs.o). 函数中定义的外部变量,找不到其源 即在g ...

  4. codevs1001 舒适的路线 - 贪心 - 并查集

    题目描述 Description Z小镇是一个景色宜人的地方,吸引来自各地的观光客来此旅游观光.Z小镇附近共有N(1<N≤500)个景点(编号为1,2,3,…,N),这些景点被M(0<M≤ ...

  5. 终于在nowcoder爆发了的懒惰

    题目 这类题目我实在忍不了了 Emma,随便做个nowcode比赛题吧,我在oj上也没找到 题意 求\(\sum_{L=1}^{n}\sum_{R=i}^{n}a[k](L<=k<=R)\ ...

  6. HDU 5992 Finding Hotels(KD树)题解

    题意:n家旅店,每个旅店都有坐标x,y,每晚价钱z,m个客人,坐标x,y,钱c,问你每个客人最近且能住进去(非花最少钱)的旅店,一样近的选排名靠前的. 思路:KD树模板题 代码: #include&l ...

  7. 论文笔记——SQUEEZENET ALEXNET-LEVEL ACCURACY WITH 50X FEWER PARAMETERS AND <0.5MB MODEL SIZE

    论文地址:https://arxiv.org/abs/1602.07360 模型地址:https://github.com/DeepScale/SqueezeNet 1. 论文思想 提出一种新的卷积组 ...

  8. YOLOv3-darknet 内容解析

    目录 Yolov3-darknet 内容解析 多标签分类预测 跨尺度预测 网络结构改变 reference Yolov3-darknet 内容解析 YOLOv3是到目前为止,速度和精度最均衡的目标检测 ...

  9. POJ 3744 Scout YYF I(矩阵快速幂优化+概率dp)

    http://poj.org/problem?id=3744 题意: 现在有个屌丝要穿越一个雷区,雷分布在一条直线上,但是分布的范围很大,现在这个屌丝从1出发,p的概率往前走1步,1-p的概率往前走2 ...

  10. UVa 10340 子序列

    https://vjudge.net/problem/UVA-10340 题意: 输入两个字符串s和t,判断是否可以从t中删除0个或多个字符得到字符串s. 思路: 很水的题... #include&l ...