<!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. Hibernate之Query接口的uniqueResult()方法

    如果查询返回多个值用list()方法 public void testQuery(){ Configuration config = new Configuration().configure(); ...

  2. Unity3D开发赛车Demo遇到的问题

    遇到问题 在3D Max中导出的跑车在Unity中轴向不对,不知有没有朋友遇到过呢? 切换坐标系统 在Unity3D中按X键,切换坐标系统 车轮方向变了 运行游戏之后,赛车的车轮方向变歪了 车依然能跑 ...

  3. Finger Gestures 3.1

    3.x自定义手势 Finger Gestures用起来非常爽,除了有常用的手势之外,3.x的版本还增加了自定义手势! 官方Document:http://fingergestures.fatalfro ...

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

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

  5. java12-6 冒泡排序法和选择排序法

    1.冒泡排序法 相邻元素两两比较,大的往后放,第一次完毕,最大值出现在了最大索引处 分析: 第一次比较排序的结果:会把其中最大的数据排到最大的索引处 第二次比较排序后的结果:因为第一次已经把最大的一个 ...

  6. PHP mcrypt加密扩展使用总结

    在开发中,很多时候我们在前后端交互中需要对一些敏感数据进行一定的加密.PHP中有提供了mcrypt的这样一个加密扩展实现对数据的加密解密. 一.mcrypt扩展的安装 在低版本的PHP中需要在配置文件 ...

  7. 怎么用JS截取字符串中第一个和第二个字母间的部分？

    一.JS中用正则判断字符串是否有匹配正则的字符串部分,格式如下: /[a-zA-Z](.*?)[a-zA-Z]/.test('1a123d45678901a2') “.test”前面的部分是正则表达式 ...

  8. libevent+bufferevent总结

    libevent+bufferevent总结 1 学习参考网址 libevent学习网址:http://blog.csdn.net/feitianxuxue/article/details/93725 ...

  9. sqlalchemy 的 ORM 与 Core 混合方式使用示例

    知乎: sqlalchemy 的 ORM 与 Core 混合方式操作数据库是一种怎样的体验? 答: 酸! 本文基于:win 10 + python 3.4 + sqlalchemy 1.0.13 基本 ...

  10. 完美隐藏win7文件和文件夹

    有没有一种方法即使使用隐藏模式也不能查看, 没错可以用上帝模式....... 啥是Win7上帝模式?不知道的看看..... <<<<<<<<<&l ...