<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<style>
#div2{
float:left;
margin-left:-100%;
}
#div3{
float:left;
width:100%;
}
</style>
<div id="div1">
<div id="div3">
<div style="margin-left:240px">
22222<br>f
22222<br>f
22222<br>f
22222<br>f
22222<br>f
22222<br>f
22222<br>f
22222<br>f
</div>
</div>
<div id="div2">
<div style="width:240px">
11111<br>F
11111<br>F
11111<br>F
11111<br>F
11111<br>F
11111<br>F
11111<br>F
11111<br>F
11111<br>F
11111<br>F
11111<br>F
</div>
</div>
</div>
<!---
这种布局也可以作为slide和content的布局,
1:内容的元素放在第一个结点(width:100%;float:left);
2: slide是第二个结点(float:left;margin-left:-100%)
-->
</body>
</html>

  

css左右侧自动填充宽度布局的更多相关文章

  1. css经典布局之左侧固定大小右侧自动适应

    最近学习了一种经典布局,固定左侧或右侧的宽度,另一侧自适应宽度,此种布局挺常用,尤其是像后台,大部分都是采用这种结构,还比如像订餐类的APP,进入商家的时候,会出现一堆饭的列表,左侧是饭的分类,右侧是 ...

  2. 老生长谈:css实现右侧固定宽度,左侧宽度自适应

    反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域 ...

  3. 老生长谈,温故知新:css实现右侧固定宽度,左侧宽度自适应

    反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽度自适应. 这种布局比较常见,博客园很多默认主题就是这种.一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域 ...

  4. css实现右侧固定宽度,左侧宽度自适应

    https://blog.csdn.net/qq_22889599/article/details/78414040 反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽 ...

  5. CSS 实现左侧固定,右侧自适应两栏布局的方法

    "左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点 ...

  6. 七种CSS左侧固定,右侧自适应两栏布局

    一 两栏布局基本HTML和CSS 首先创建基本的HTML布局和最基本的样式. 基本的样式是,两个盒子相距20px, 左侧盒子宽120px,右侧盒子宽度自适应 <div class="w ...

  7. css判断不同分辨率显示不同宽度布局实现自适应宽度

    一.CSS DIV网页布局中当分辨率小于等于1024px(像素)时,DIV布局对象显示1000px宽度,当分辨率大于1024px时候显示1200px宽度等需求.使用CSS实现改变浏览器显示宽度从而实现 ...

  8. CSS判断不同分辨率显示不同宽度布局CSS3技术支持IE6到IE8

    CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8.将用到css3 @media样式进行判断,但IE9以下版本不支持CSS3技术,这里DIVCSS5给大家介绍通过JS ...

  9. CSS设置表格TD宽度布局

    使用表格布局时,对单元格的宽度控制很伤脑筋,所以查阅资料整理如下: 一.表格布局table-layout 语法: table-layout : auto | fixed 取值: auto  : 大多数 ...

随机推荐

  1. selenium使用等待的几种方式

    1.使用java的sleep try { Thread.sleep(3000); } catch (InterruptedException e) { // TODO Auto-generated c ...

  2. 项目回顾2-vue的初体验-在已有项目局部使用vue,无须额外配置

    当了解到尤大大的vue的时候,就很想在项目里用一下,不过当用了vue cli 创建了一个脚手架之后,感觉现有的项目改造难度太大了,毕竟原来是JQ的.这个项目已经上线,基本功能也完成了,客户提出来后台对 ...

  3. Flash Builder 找不到所需的 Adobe Flash Player

    经测试该方法可用! http://bbs.9ria.com/thread-108472-1-1.html 最近重装了系统,flash开发工具也由flex换成了flash builder.调试时就出现了 ...

  4. JMeter学习(十八)JMeter测试Java(二)

    实例: 服务为:将输入的两个参数通过IO存入文件: 1.打开MyEclipse,编写Java代码 服务: package test; import java.io.File; import java. ...

  5. 查​看​和​设​置​o​r​a​c​l​e​数​据​库​的​最​大​连​接​数

    当前的连接数 select count(*) from v$process; 设置的最大连接数(默认值为150) select value from v$parameter where name = ...

  6. 上传图片shell绕过过滤的方法

    一般网站图片上传功能都对文件进行过滤,防止webshelll写入.但不同的程序对过滤也不一样,如何突破过滤继续上传? 本文总结了七种方法,可以突破! .文件头+GIF89a法.(php)//这个很好理 ...

  7. tp2.2.2新特点

    1.不需要在配置文件中配置URL_MODEL变量就可以用普通模式和路径模式及兼容模式访问URL,但重写模式不可以. 2.当访问的URL地址没有指明具体动作(控制器里的方法)的时候,如果该控制器对应的视 ...

  8. VFS分析(一)挂载(持续更新)

    基础知识在<深入linux内核架构>第8章,自行脑补. 看下几个关键的过程: do_add_mount里有重要函数lock_mount, lock_mount函数的输入是struct pa ...

  9. SQL 时间处理

    1.获取当前时间 GetDate() 2.获取当前年.月.日 DATEPART(yyyy,GetDate()).DATEPART(m,GetDate()).DATEPART(d,GetDate()) ...

  10. 域策略禁用usb

    文档及模板可在 http://pan.baidu.com/s/1qYTcjTy  下载 pro_usb_users.adm  此模板可禁用到 指定盘符,针对用户策略 pro_usb_computers ...