自适应布局

  • 浮动

  • 一列绝对定位,一列用margin撑开空间

  • margin负值:主体用一层包裹,浮动,内层用margin留出空间;其他列浮动,使用margin调整到空出的位置 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2    "http://www.w3.org/TR/html4/strict.dtd">
 3 
 4 <html>
 5 <head>
 6     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 7     <title>layout</title>
 8     <meta name="author" content="Iori" />
 9     <!-- Date: 2013-08-10 -->
10     <style type="text/css">
11         body{
12             background:#CCFFCC;
13             margin:0;
14             padding:0;
15         }
16         .wrap{
17             position:relative;
18             background:#CCCCFF;
19             margin:10px;
20             border: dashed 1px red;
21             padding:3px;
22             height:100px;
23             border-radius: 2px;
24         }
25         .wrap div{
26             background:#fff;
27         }
28         .left{
29             position: absolute;
30             left:3px;
31             top:3px;
32             width:30%;
33             /*height:100%;*/
34         }
35         .main{
36             margin: 0 0 0 31%;
37             height:100%;
38         }
39         
40         .left2{
41             float:left;
42             width:30%;
43         }
44         
45         .main2{
46             float:right;
47             width:69%;
48             height:100%;
49         }
50         
51         .left3{
52             width:30%;
53             float:left;
54             margin-left:-100%;
55         }
56         #container{
57             background:#CCCCFF;
58             float:left;
59             width:100%;
60         }
61         .main3{
62             margin-left:31%;
63         }
64     </style>
65 </head>
66 <body>
67     <h3> 一列绝对定位,一列margin撑开距离</h3>
68     <div class="wrap">
69         <div class="left">left position:absolute</div>
70         <div class='main'> main margin为左右两边宽度</div>
71     </div>
72     
73     <h3>分别浮动 </h3>
74     <div class="wrap" >
75         <div class="left2">float:left</div>
76         <div class='main2'> float:right</div>
77     </div>
78     
79     <h3>主体用一层包裹,浮动,内层用margin留出空间;其他列浮动,使用margin调整到空出的位置 </h3>
80     <div class="wrap" >
81         <div id="container">
82             <div class='main3'>main <br /> 
83                 外层:float:left 内层:margin-left:为.left.style.width
84                 </div>
85         </div>
86         <div class="left3">float:left; margin-left:-100%</div>
87     </div>
88 </body>
89 </html>
View Code

 

各列等高的设置:

  padding正值, padding包含在盒模型的空间内,padding-bottom使用一个较大值撑开空间

  margin负值,  margin是盒子与盒子之间距离,用margin-bottom使用负值,将外层边框拉回,形成等高

  外层overflow:hidden: 将padding撑开的空间溢出的部分隐藏

  由于使用padding撑开而溢出 并且溢出的部分隐藏, 会造成下边框溢出而不可见

转载于:https://www.cnblogs.com/iori-zy/p/3250753.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/301024.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

php中添加一个链接,使用php在推文中链接一个标签

你好我需要在php的推文中添加一个href标签,例如,如果我有这样的推文&#xff1a;username tweet body message http://t.co/sfr34s5我需要用php将其变成这个&#xff1a;username tweet body message http://t.co/sfr34s5我认为这可以使用preg_replace来完成,我有类似的东西已经…

Hello Blazor:(2)集成Tailwind CSS

Blazor默认集成了bootstrap&#xff0c;对于我这种后端出身&#xff0c;对CSS一知半解的.NET开发人员来说&#xff0c;使用起来还是有一定难度的。好不容易才学到点皮毛&#xff0c;结果前端人员居然告诉我&#xff0c;bootstrap已经过时了&#xff0c;现在主流都用Tailwind CS…

西游记里学化学,请收下我的膝盖~ | 今日最佳

全世界只有3.14 % 的人关注了青少年数学之旅&#xff08;视频源网络&#xff0c;侵权删&#xff09;学到了吗&#xff1f;↓ ↓ ↓

从基础开始:Qomo OpenProject中的一些关键词

Qomolangma penProject v0.9类别 &#xff1a;Rich Web Client关键词 &#xff1a;JS OOP&#xff0c;JS Framwork, Rich Web Client&#xff0c;RIA&#xff0c;Web Component&#xff0c; DOM&#xff0c;DTHML&#xff0c;CSS&#xff0c;JavaScript&#xff0…

TabHost两种实现方式

第一种&#xff1a;继承TabActivity&#xff0c;从TabActivity中用getTabHost()方法获取TabHost。只要定义具体Tab内容布局就行了. <?xml version"1.0" encoding"utf-8"?> <FrameLayout xmlns:android"http://schemas.android.com/apk/re…

php正则过滤html标签_空格_换行符的代码,PHP 正则过滤 html 标签、空格、换行符的代码 (文章格式化)...

$strpreg_replace("/\s/", " ", $str); //过滤多余回车$strpreg_replace("/$strpreg_replace("//si","",$str); //注释$strpreg_replace("//si","",$str); //过滤DOCTYPE$strpreg_replace("//si",…

一文让你掌握单元测试的Mock、Stub和Fake

单元测试中有几个神秘的概念&#xff0c;它们就是Mock&#xff0c;模拟对象&#xff1b;Stub&#xff0c;存根&#xff1b;Fake&#xff0c;伪对象&#xff0c;它们听起来很类似&#xff0c;也很容易混淆&#xff0c;让我们通过这篇文章揭开它们神秘的面纱&#xff0c;探索其幽…

有些人还活着,被你一按就死了。。 | 今日最佳

全世界只有3.14 % 的人关注了青少年数学之旅&#xff08;视频源网络&#xff0c;侵权删&#xff09;学到了吗&#xff1f;↓ ↓ ↓

java 反射 本类,关于Java反射中基本类型的class有关问题

关于Java反射中基本类型的class问题1. 基本类型的class和其对应包装类的class是不同的&#xff0c;所以在获得Method指定参数的时候&#xff0c;需要精确指定参数的类型&#xff0c;即 setInt(int x) 无法使用 getMethod("setInt",Integer.class) 获得。2. 基本类型的…

Jafka源码粗略解读之二--关于JMX

2019独角兽企业重金招聘Python工程师标准>>> JMX Jafka里用到了JMX&#xff0c;之前也没用过&#xff0c;迅速突击了一下&#xff0c;感觉还是挺简单的&#xff1a; 有一篇文章用一个例子介绍JMX怎么使用的&#xff0c;简洁明了&#xff1a;http://www.javalobby.or…

参数化的RBAC模型

1 动机 基于角色的访问控制(RBAC)模型被普遍认为是一种有效的访问控制模型&#xff0c;它比传统的自主访问控制(DAC)和强制访问控制(MAC)具有更高的灵活性和更好的扩展性。 在实际应用中&#xff0c;随着企业规模以及信息系统规模逐渐扩大&#xff0c;系统中角色的数目也随之急…

使用 ML.NET 进行保险价格预测

此前通过多篇文章已充分介绍过&#xff0c;ML.NET是一个开源的跨平台机器学习框架&#xff0c;特别适合 .NET 开发人员。它允许将机器学习集成到 .NET 应用中&#xff0c;而无需离开 .NET 生态系统&#xff0c;甚至拥有 ML 或数据科学背景。ML.NET 现有的各种内置模型训练器可用…

送礼物给女生,她哭了是怎么回事?

全世界只有3.14 % 的人关注了青少年数学之旅中秋节快要到了&#xff0c;超模君说要给我准备个惊喜&#xff0c;what&#xff1f;结果我在桌面上发现了一个盒子和一大堆 垃圾 零件&#xff0c;清洁阿姨你在哪&#xff1f;我需要你。不过仔细一看&#xff0c;我去&#xff1f;&am…

oracle+11g+rda,Oracle RDA 4.20 初体验

RDA 全名RemoteDiagnostic Agent&#xff0c;是Oracle用来收集、分析数据库的工具&#xff0c;但统计信息远远大于只是数据库的&#xff0c;也可以说是现在一个Oracle dba 角色需要掌握的Oracle DB SERVER的信息&#xff0c;包含数据库安装、配置、性能、备份等信息、操作系统各…

室内设计品牌网站搭建的作用是什么

随着人们生活质量日益提升&#xff0c;对其自身的居住环境也有了较高要求&#xff0c;每个人审美不一样&#xff0c;无论自己居住的房屋还是公司办公/商场等场景都需要设计不同的内容&#xff0c;还有各种设施的摆放及类别等都有讲究&#xff0c;尤其对公司及商场等环境&#x…

面向.NET开发人员的Dapr- actors 构建块

原文地址&#xff1a;https://docs.microsoft.com/en-us/dotnet/architecture/dapr-for-net-developers/actors The actor model originated in 1973. It was proposed by Carl Hewitt as a conceptual model of concurrent computation, a form of computing in which several…

史上最严重的忘拿钥匙事件 | 今日最佳

全世界只有3.14 % 的人关注了青少年数学之旅&#xff08;视频源网络&#xff0c;侵权删&#xff09;难搞噢↓ ↓ ↓

magicAjax问题

如果web.config是requestEncoding"gb2312" responseEncoding"gb2312" 这样使用起来就会卡在loading...那里大家遇到过吗&#xff1f; 但是如果改成requestEncoding"utf-8" &#xff0c;那在搜索里面就不能搜索中文了&#xff0c;汗&#xff5e;…

oracle经常开关好吗,频繁开关机对电脑有什么影响吗?

2005-08-03 08:01:45没关系的哦&#xff0c;一天五六次正常&#xff0c;只要是正常开关机就OK。全部2005-08-03 08:01:452005-08-03 07:49:392005-08-03 05:21:09影响不大完全在合理范围内,等到坏的时候也应该淘汰了全部2005-08-03 05:21:092005-08-03 04:09:04原则上经常性的开…

老是担心数学学不好?这些基础是时候正视了!

我们都知道&#xff0c;数学是学生生涯的一门重要学科&#xff0c;与其担心三年级掉队&#xff0c;不如从小培养良好的学习兴趣和数感直觉&#xff0c;之后的学习就是水到渠成的事了&#xff0c;这可不是报个奥数班就万事大吉了&#xff0c;最关键的&#xff0c;还得从培养孩子…