<!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. Dictionary（HashMap）的实现

    什么是哈希表? 哈希表(Hash table,也叫散列表),是根据key而直接进行访问的数据结构.也就是说,它通过把key映射到表中一个位置来访问记录,以加快查找的速度.这个映射函数叫做散列函数,存放 ...

  2. linux下安装php的imagick扩展模块（附php升级脚本）

    imagick是一个PHP的扩展,是一套软件系列,用ImageMagick提供的API来进行图片的创建与修改,不过这些操作已经包装到扩展imagick中去了,最终调用的是ImageMagick提供的A ...

  3. 教你10分钟内在Windows上完成Rails开发环境的安装和配置

    原文:http://www.cnblogs.com/tambor/archive/2011/12/25/rails_anzhuang_railsinstaller.html 一般来说,Windows开 ...

  4. Linux 进程与线程四（加锁--解锁）

    线程共享进程的内存空间,打开的文件描述符,全局变量. 当有多个线程同事访问一块内存空间或者一个变量.一个文件描述符,如果不加控制,那么可能会出现意想不到的结果. 原子操作 对于我们的高级语言(C语言, ...

  5. C#属性有什么作用

    1,主要作用:将读,写权限分开.如果不使用属性,仅使用public, protected, private,这几个限制都是读,写属性一起的,可读就可写,不可读同时也不可写.不能实现只读不可写,只写不可 ...

  6. phpmailer 参数使用说明

    $AltBody--属性 出自:PHPMailer::$AltBody 文件:class.phpmailer.php 说明:该属性的设置是在邮件正文不支持HTML的备用显示 AddAddress--方 ...

  7. angularjs中只显示选中的radio的值

    angularjs中,只显示选中的radio的值.主要是相同的radio,name属性值要相同还有ng-model的值要相同,同时要指定value值.这样选中的时候就会在下面的div中显示选中的值了. ...

  8. 当 IDENTITY_INSERT 设置为 OFF 时，不能为表中的标识列插入显式值

    {"当 IDENTITY_INSERT 设置为 OFF 时,不能向表 'OrderList' 中的标识列插入显式值"} 对于这个异常可以从两个角度来处理:A:数据库执行语句  B: ...

  9. C#委托Action、Action<T>、Func<T>、Predicate<T>

    CLR环境中给我们内置了几个常用委托Action. Action<T>.Func<T>.Predicate<T>,一般我们要用到委托的时候,尽量不要自己再定义一 个 ...

  10. ZooKeeper学习第二期--ZooKeeper安装配置

    一.Zookeeper的搭建方式 Zookeeper安装方式有三种,单机模式和集群模式以及伪集群模式. ■ 单机模式:Zookeeper只运行在一台服务器上,适合测试环境:■ 伪集群模式:就是在一台物 ...