<!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. 【问题&解决】解决创建Android模拟器时提示"No system images installed for this target"的问题

    在创建Android模拟器时间发现提示“No system images installed for this target”问题,无法创建模拟器,如下图: 解决:经上网查证,发现原因在于CPU/AB ...

  2. 【读书笔记《Android游戏编程之从零开始》】1.Android 平台简介与环境搭建

    简单的记录下笔记,具体可百度! Android SDK (Software Development Kit)- Android 软件开发工具包,用于辅助Android 操作系统软件开发,是开发Andr ...

  3. java 空指针异常(java.lang.NullPointerException)

    在Java中对值为null的指针调用任何方法,就会引发空指针异常(java.lang.NullPointerException).空指针异常绝对 是Java中最难查找和调试的一种异常,你永远无法得到任 ...

  4. java10-2 toString()方法

    public String toString():返回该对象的字符串表示. Integer类下的一个静态方法: public static String toHexString(int i):把一个整 ...

  5. 验证码生成的c语言库

    http://www.open-open.com/lib/view/open1324534929968.html

  6. where,having与 group by连用的区别

    select 列a,聚合函数 from 表名 where 过滤条件 group by 列a having 过滤条件 group by 字句也和where条件语句结合在一起使用.当结合在一起时,wher ...

  7. POJ 1088滑雪

    滑雪 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 89168   Accepted: 33474 Description ...

  8. JavaScript中浏览器兼容问题

    浏览器兼容性问题是在实际开发中容易忽略而又最重要的一部分.我们在讲老版本浏览器兼容问题之前,首先要了解什么是能力检测,它是来检测浏览器有没有这种能力,即判断当前浏览器是否支持要调用的属性或者方法.下面 ...

  9. OAF中 遍历HGrid组件中的所有VO行

    在HGrid组件中有如下所示的HeaderVO和LineVO 需要在头上的LOV中触发事件去更新行VO中的值,LOV事件的处理方法见 getLovParameter ,但是由于HGrid的特殊性,不能 ...

  10. php基础08：改变数据类型

    <?php //1.获取数据类型 $num = 55; echo gettype($num); //integer //2.设置数据类型 settype($num, "string&q ...