<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. 05: 配置yum源

    1.1 将镜像复制到本地创建yum源 1.将准备好的系统镜像放到指定的目录,本次目录指定在:/dawnfs/sourcecode 2.创建挂载目录:mkdir /mnt/yum 3.挂载镜像: mou ...

  2. 07: Django 使用ldap登录、注销等

    目录:Django其他篇 01:Django基础篇 02:Django进阶篇 03:Django数据库操作--->Model 04: Form 验证用户数据 & 生成html 05:Mo ...

  3. C_Learning(3)

    / 结构体 / 声明结构体类型的一般形式: struct 结构体名[--表示的是这个结构体的类型] {    成员列表 }; [不要漏掉这个";"] / 声明结构可以放在main函 ...

  4. 20145333茹翔《网络对抗》Exp9 Web安全基础实践

    20145333茹翔<网络对抗>Exp9 Web安全基础实践 基础问题回答 1.SQL注入原理,如何防御 SQL注入 就是通过把SQL命令插入到"Web表单递交"或&q ...

  5. tensorflow 生成随机数 tf.random_normal 和 tf.random_uniform 和 tf.truncated_normal 和 tf.random_shuffle

    ____tz_zs tf.random_normal 从正态分布中输出随机值. . <span style="font-size:16px;">random_norma ...

  6. windows10下cygwin安装神器apt-cyg

    一.背景 需要在cygwin下安装一些库 二.安装 2.1获取apt-cyg源码 git clone https://github.com/transcode-open/apt-cyg.git 2.2 ...

  7. Mysql相关问题收集

    1.查询每个班级的前三名 DROP TABLE IF EXISTS `sc`; CREATE TABLE `sc` ( `id` ) NOT NULL AUTO_INCREMENT, `name` v ...

  8. ZedGraph如何动态的加载曲线

    ZedGraph的在线文档 http://zedgraph.sourceforge.net/documentation/default.html 官网的源代码 http://sourceforge.n ...

  9. gulp介绍及常用插件

    前端构建工具gulpjs的使用介绍及技巧 gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nod ...

  10. springmvc基础知识及注解

    SpringMVC 1.概念 Spring的MVC框架是一个基于DispatcherServlet的MVC框架,主要由DispatcherServlet.处理器映射.处理器.视图解析器.视图组成.每一 ...