<!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. uva 11134 fabled rooks (贪心)——yhx

    We would like to place n rooks, 1 n 5000, on a n nboard subject to the following restrictions• The i ...

  2. noip2008普及组4题题解-rLq

    (啊啊啊终于补到了今天的作业了) 本题地址:http://www.luogu.org/problem/show?pid=1058 题目描述 小渊是个聪明的孩子,他经常会给周围的小朋友们将写自己认为有趣 ...

  3. uva 10976 fractions again(水题)——yhx

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAB3gAAAM+CAIAAAB31EfqAAAgAElEQVR4nOzdO7KtPJum69GEpAcVQQ ...

  4. 【ASP.NET 进阶】定时执行任务实现 (定时读取和修改txt文件数字内容,无刷新显示结果)

    现在有很多网站或系统需要在服务端定时做某件事情,如每天早上8点半清理数据库中的无效数据等等,Demo 具体实现步骤如下: 0.先看解决方案截图 1.创建ASP.NET项目TimedTask,然后新建一 ...

  5. 边工作边刷题:70天一遍leetcode: day 71-1

    Longest Substring with At Most K Distinct Characters 要点:要搞清楚At Most Two Distinct和Longest Substring W ...

  6. (转)对各种初始化函数的理解:OnInitDialog、InitInstance、InitApplication函数的理解

    InitInstance和InitApplication 是 APP 类的初始化.而 OnInitDialog 是在 Dialog 类初始化时调用的函数. ★ 应用程序相关配置,一般在InitInst ...

  7. jquery 实现邮箱输入自动提示功能:(一)

    记得去年做某个项目的时候,用到了邮箱输入自动提示功能,于是网上搜了一下,发现了这个写得不错,现在回想起来,转载一下,方便查阅. 邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作 ...

  8. putty 访问 vmware中ubuntu 方法

     putty访问虚拟机   从宿主机中用putty连接虚拟机中的Ubuntu. putty默认使用ssh方式连接,这需要在Ubuntu Server中安装ssh服务.使用命令sudo apt-get ...

  9. Linq中查询List组合相同值数量大于1

     List< select g.Key).ToList();

  10. 17Mybatis_动态sql-sql片段

    这篇文章讲一下sql片段. 讲一下sql片段的的需求: 将上边实现的动态sql判断代码块抽取出来,组成一个sql片段.其它的statement中就可以引用sql片段. 方便程序员进行开发. 第一步我们 ...