如何实现:左右固定,中间自适应布局,中间栏优先加载?

  1 html代码:
  2
  3 <div id="left">左边栏</div>
  4 <div id="right">右边栏</div>
  5 <div id="main">主内容</div>
  6
  7 方法一:利用绝对定位方法(不推荐)
  8
  9 css部分:
 10
 11 body {margin: 0;padding: 0; height: 100%;}
 12 #left,#right {position: absolute; top:0; width: 220px; height: 100%;background:pink;}
 13 #left {left: 0;}
 14 #right { right:0;}
 15 #main {margin: 0 230px; height: 100%;}
 16
 17 这种方法是最简单,也是麻烦最多的,如果中间栏含有最小宽度限制,或是含有宽度的内部元素,当浏览器宽度小到一定程度,会发生层重叠的情况。
 18
 19
 20
 21 方法二:采用的是浮动布局
 22
 23 css部分:
 24
 25
 26
 27 #left,#right { float: left; width: 220px; height: 200px; background: blue;}
 28
 29 #right { float: right;}
 30
 31 #main { margin: 0 230px;background: red; height: 200px;}
 32
 33 这种方法我利用的就是浮动原理,左右定宽度分别进行左浮动和右浮动,此时主内容列(中间列没有定度)主会自动插入到左右两列的中间,最要注意的一点是,中间列一定要放在左右两列的后面
 34
 35
 36
 37 方法三:margin方法
 38
 39 css部分:
 40
 41
 42
 43 #left{ width:200px; float:left;margin-right:-200px; background-color:#FF9900}
 44
 45 #main{ width:auto;background:#00FF00;margin:0 220px;}
 46
 47 #right{ width:200px;margin-left:-200px; float:right; background-color:#CCCC00}
 48
 49 左右设置后,使用margin
 50
 51
 52
 53 方法四:个人感觉最简单方法:
 54
 55 css部分:
 56
 57
 58
 59 #left{ width:200px; float:left;}
 60
 61 #mid{ width:auto;}
 62
 63 #right{ width:200px; float:right;}
 64
 65 中间使用width:auto;左右分别左右浮动
 66
 67
 68
 69 方法五:实现中间栏优先加载(重要部分优先加载)
 70
 71 html部分:
 72
 73
 74
 75 <div class="main-2">
 76
 77      <div class="main-wrap-2">main-wrap</div>
 78
 79 </div>
 80
 81 <div class="sub-2">sub</div>
 82
 83 <div class="extra-2">extra</div>
 84
 85 css部分:
 86
 87
 88
 89 .main-2{ float:left; width:100%;margin-bottom:-3000px; padding-bottom:3000px;background:#F90;}
 90
 91 .main-wrap-2{  margin:0 200px 0 150px;  }
 92
 93 .sub-2{ float:left; margin-left:-100%; width:150px; background:#6C0; margin-bottom:-3000px; padding-bottom:3000px;}
 94
 95 .extra-2{ float:left; margin-left:-200px; width:200px; background:#F9F; margin-bottom:-3000px; padding-bottom:3000px;}
 96
 97
 98
 99 优先加载关键在于重要内容在html里面必须在前面,所有main部分移到了最上面
100
101
102
103 较完整内容可以参考——双飞翼布局:
104
105 <style type="text/css">
106             *{ margin:0; padding:0px;}
107             .header{ background:#666; text-align:center;}
108             .body{ overflow:hidden;*zoom:1;}
109             .wrap-2{ margin-top:30px;}
110             .wrap-2 .main-2{ float:left; width:100%;margin-bottom:-3000px; padding-bottom:3000px;background:#F90;}
111             .wrap-2 .main-wrap-2{  margin:0 200px 0 150px;  }
112             .wrap-2 .sub-2{ float:left; margin-left:-100%; width:150px; background:#6C0; margin-bottom:-3000px; padding-bottom:3000px;}
113             .wrap-2 .extra-2{ float:left; margin-left:-200px; width:200px; background:#F9F; margin-bottom:-3000px; padding-bottom:3000px;}
114             .footer{ background:#666; text-align:center;}
115         </style>
116
117 <div class="wrap-2">
118             <div class="header">Header</div>
119             <div class="body">
120                 <div class="main-2"><div class="main-wrap-2"><p>main-wrap</p><p>main-wrap</p></div></div>
121                 <div class="sub-2"><p>sub</p><p>sub</p><p>sub</p></div>
122                 <div class="extra-2"><p>extra</p><p>margin-left:350px; background:#CC0;margin-left:350px; background:#CC0;</p></div>
123             </div>
124             <div class="footer">Footer</div>
125         </div>
126
127
128
129 方法六:中间栏优先加载,采用css3 方法:
130
131 [html]<!DOCTYPE HTML>
132 <html>
133 <head>
134 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
135 <title>自适应宽度,左右两栏固定宽度,中间栏优先加载</title>
136 <style>
137 .container{
138         display:-moz-box;
139         display:-webkit-box;
140         }
141 div{
142         padding:10px;
143         -moz-box-sizing:border-box;
144         -webkit-box-sizing:border-box;
145         }
146 .sider_l{
147         width:250px;
148         -moz-box-ordinal-group:1;
149         -webkit-box-ordinal-group:1;
150         background:limegreen;
151         }
152 .middle_content{
153         -moz-box-flex:1;
154         -webkit-box-flex:1;
155         -moz-box-ordinal-group:2;
156         -webkit-box-ordinal-group:2;
157         background:lightpink;
158         }
159 .sider_r{
160         width:250px;
161         -moz-box-ordinal-group:3;
162         -webkit-box-ordinal-group:3;
163         background:green;
164         }
165 </style>
166 </head>
167
168 <body>
169         <div class="container">
170             <div class="middle_content">优先加载主内容区</div>
171         <div class="sider_l">左边栏</div>
172                 <div class="sider_r">右边栏</div>
173     </div>
174 </body>
175 </html>
176 [/html]
177
178
179
180 方法七:中间栏优先加载position:absolute方法
181
182 <style type="text/css">
183 html,body{width:100%;height:100%;margin:0;padding:0;}
184 .content{width:100%;height:100%;position:relative;background:#CFF;overflow:hidden;}
185 .left{width:200px;height:100%;background:#0F0;position:absolute;z-index:1001;top:0;left:0;}
186 .center-ct{height:100%;background:#60F;position:absolute;z-index:900;top:0;left:0;margin:0;width:100%;}
187 .center{margin:0 200px;}
188 .right{width:200px;height:100%;background:#FF0;position:absolute;z-index:1000;right:0;top:0;}
189 </style>
190 </head>
191
192 <body>
193 <div class="content">
194 <div class="center-ct">
195     <div class="center">
196     center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center center
197     </div>
198 </div>
199 <div class="left">left</div>
200 <div class="right">right</div>
201 </div>
202 </body>
203 </html>
				
时间: 2024-10-10 00:25:49

如何实现:左右固定,中间自适应布局,中间栏优先加载?的相关文章

左右固定,中间自适应布局,中间栏优先加载

html代码: <div id="left">左边栏</div><div id="right">右边栏</div><div id="main">主内容</div> 方法一:利用绝对定位方法(不推荐) css部分: body {margin: 0;padding: 0; height: 100%;}#left,#right {position: absolute; top:0;

上面固定下边自适应布局

<!DOCTYPE HTML><html><head><meta charset="gb2312"><title>头尾固定中间高度自适应布局</title><style>html, body { height:100%; margin:0; padding:0}#dHead { height:100px; line-height:100px; background:#690; width:100%; p

Android四大组件之Activity(活动)及其布局的创建与加载布局

Android四大组件之Activity(活动)及其布局的创建与加载布局 什么是Activity ? 活动(Activity)是包含用户界面的组件,主要用于和用户进行交互的,一个应用程序中可以包含零个或多个活动. 手动创建Activity的过程详解 到现在为止,你还没有手动创建过活动呢,在第一个安卓工程中,HelloWorldActivity是ADT帮我们创建的,手动创建活动可以加深我们的理解,因此现在是时候应该自己动手了. 首先,你需要再新建一个 Android 项目,项目名可以叫做 Acti

布局还能异步加载?AsyncLayoutInflater一点小经验送给你

目录 前言 关于布局加载的两大性能瓶颈,通过IO操作将XML加载到内存中并进行解析和通过反射创建View.当xml文件过大或页面文件过深,布局的加载就会较为耗时.我们知道,当主线程进行一些耗时操作可能就会导致页面卡顿,更严重的可能会产生ANR,所以我们能如何来进行布局加载优化呢?解决这个问题有两种思路,直接解决和侧面缓解.直接解决就是不使用IO和反射等技术(这个我们会在下一节进行介绍).侧面缓解的就是既然耗时操作难以避免,那我们能不能把耗时操作放在子线程中,等到inflate操作完成后再将结果回

CSS百分比padding实现比例固定图片自适应布局 (转载)

一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比值不一样. 这么设计的原因在我的新书(应该不出几个月就要出版了)中会有说明,这里不展开. 对于padding属性而言,任意方向的百分比padding都现对于宽度计算可以让我们轻松实现固定比例的块级容器,举个例子,假设现在有个<div>元素: div { padding: 50%; } 或者: di

CSS百分比padding实现比例固定图片自适应布局

本文转自 张鑫宇(大神的很多文章都拜读过,写的很好,清晰明了,赞)的 https://www.zhangxinxu.com/wordpress/2017/08/css-percent-padding-image-layout/ 一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比值不一样. 这么设计的原因在我的新书(应该不出几个月就要出版了)中会有说

【Android】纯代码创建页面布局(含异步加载图片)

开发环境:macOS 10.12 + Android Studio 2.2,MinSDK Android 5.1 先看看总体效果 本示例是基于Fragment进行的,直接上代码: [界面结构] 在 Fragment 中,采用 ScrollView + LinearLayout 实现. 1 <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http:/

[Android 性能优化系列]布局篇之动态加载布局

大家如果喜欢我的博客,请关注一下我的微博,请点击这里(http://weibo.com/kifile),谢谢 转载请标明出处(http://blog.csdn.net/kifile),再次感谢 原文地址:http://developer.android.com/training/improving-layouts/loading-ondemand.html 在接下来的一段时间里,我会每天翻译一部分关于性能提升的Android官方文档给大家 性能优化布局篇: [Android 性能优化系列]布局篇

布局视图是如何加载到手机窗口上的

上一篇文章在讲到Handler的时候谈到了android的Activity启动是如何执行到onCreate方法的,Android中Handler原理这篇主要从onCreate方法里面我们必须要写的方法setContentView开始,研究布局或者View是如何加载到手机窗口上的. 当在执行到setContentView时,实际上执行的是 public void setContentView(int layoutResID) { getWindow().setContentView(layoutR