关于页面的多种自适应布局——两列布局
2024-05-28 17:18:54
我们在切页面的时候打交道最多的就是关于布局排版的技巧，我这里总结了一些平时做页面时用的到各种布局技巧，作为笔记便于日后随时查询。
1、简单结构1，列表在前，内容在后
1 <style type="text/css">
2 .layout{background-color:gray; padding:10px; border:10px solid orange; margin:10px 0; zoom:1;}
3 .layout:after{content:"";clear:both; display:block; height:0px; overflow:hidden;}
4 .wrap{}
5 .content{background-color:green; /*height:290px;*/}
6 .sidebar{background-color:blue; /*height:290px;*/ width:200px;}
7 p{color:#fff;font-family:arial; font-size:16px; line-height:30px;}
8 p.clear{clear:both;}
9 /**简单结构1，列表在前，内容在后**/
10 .layout-1{}
11 .layout-1 .sidebar{float:left;}
12 .layout-1 .content{margin-left:210px; _margin-left:207px; /*IE6下的3像素外边距问题*/}
13 .layout-1-1{}
14 .layout-1-1 .sidebar{float:right;}
15 .layout-1-1 .content{margin-right:210px; _margin-right:207px;text-overflow:ellipsis; white-space:nowrap; /*IE6下的3像素外边距问题*/}
16 .layout-2{}
17 .layout-2 .sidebar{float:left; margin-right:10px; _margin-right:7px; /*IE6下的3像素外边距问题*/}
18 .layout-2 .content{overflow:hidden; _zoom:1; /*"overflow" IE6下hasLayout没有起作用，使用zoom:1来实现*/}
19 .layout-2-1{}
20 .layout-2-1 .sidebar{float:right; margin-left:10px; _margin-left:7px; /*IE6下的3像素外边距问题*/}
21 .layout-2-1 .content{overflow:hidden; _zoom:1; /*"overflow" IE6下hasLayout没有起作用，使用zoom:1来实现*/}
22 .layout-3{position:relative;}
23 .layout-3 .sidebar{position:absolute; left:10px; top:10px;}
24 .layout-3 .content{margin-left:210px;}
25 .layout-3-1{position:relative;}
26 .layout-3-1 .sidebar{position:absolute; right:10px; top:10px;}
27 .layout-3-1 .content{margin-right:210px;}
28 </style>
29
30 <div class="layout layout-1">
31 <div class="sidebar"><p>.layout-1 .sidebar{float:left;}</p></div>
32 <div class="content"><p>.layout-1 .content{margin-left:210px; _margin-left:207px; /*IE6下的3像素外边距问题*/}</p></div>
33 <p>这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
34 </div>
35 <div class="layout layout-1-1">
36 <div class="sidebar"><p>.layout-1-1 .sidebar{float:right;}</p></div>
37 <div class="content"><p>.layout-1-1 .content{margin-right:210px; _margin-right:207px; /*IE6下的3像素外边距问题*/}</p></div>
38 <p class="clear">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
39 </div>
40
41 <div class="layout layout-2">
42 <div class="sidebar"><p>.layout-2 .sidebar{float:left; margin-right:10px; _margin-right:7px; /*IE6下的3像素外边距问题*/}</p></div>
43 <div class="content"><p>.layout-2 .content{overflow:hidden; _zoom:1; /*"overflow" IE6下hasLayout没有起作用，使用zoom:1来实现*/}</p></div>
44 <p class="clear">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
45 </div>
46 <div class="layout layout-2-1">
47 <div class="sidebar"><p>.layout-2-1 .sidebar{float:right; margin-left:10px; _margin-left:7px; /*IE6下的3像素外边距问题*/}</p></div>
48 <div class="content"><p>.layout-2-1 .content{overflow:hidden; _zoom:1; /*"overflow" IE6下hasLayout没有起作用，使用zoom:1来实现*/}</p></div>
49 <p class="clear">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
50 </div>
51 <div class="layout layout-3">
52 <div class="sidebar"><p>.layout-3 .sidebar{position:absolute; left:10px; top:10px;}</p></div>
53 <div class="content"><p>.layout-3 .content{margin-left:210px;}</p></div>
54 <p class="clear">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
55 </div>
56 <div class="layout layout-3-1">
57 <div class="sidebar"><p>.layout-3 .sidebar{position:absolute; right:10px; top:10px;}</p></div>
58 <div class="content"><p>.layout-3 .content{margin-right:210px;}</p></div>
59 <p>这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
60 </div>2、简单结构2，内容在前，列表在后,这种布局兼容性不是很好，内容在前对于SEO优化很重要
1 <style type="text/css">
2 .layout{background-color:gray; padding:10px; border:10px solid orange; margin:10px 0; zoom:1;}
3 .layout:after{content:"";clear:both; display:block; height:0px; overflow:hidden;}
4 .wrap{}
5 .content{background-color:green; /*height:290px;*/}
6 .sidebar{background-color:blue; /*height:290px;*/ width:200px;}
7 p{color:#fff;font-family:arial; font-size:16px; line-height:30px;}
8 p.clear{clear:both;}
9
10 /**简单结构2，内容在前，列表在后**/
11 .layout-10{}
12 .layout-10 .content{margin-left:210px; margin-bottom:-30px;}
13 .layout-10 .sidebar{}
14 .layout-10-1{}
15 .layout-10-1 .content{margin-right:210px; margin-bottom:-30px;}
16 .layout-10-1 .sidebar{float:right;}
17 .layout-11{position:relative;}
18 .layout-11 .content{margin-left:210px;}
19 .layout-11 .sidebar{position:absolute; left:10px; top:10px;}
20 .layout-11-1{position:relative;}
21 .layout-11-1 .content{margin-right:210px;}
22 .layout-11-1 .sidebar{position:absolute; right:10px; top:10px;}
23
24 </style>
25 <div class="layout layout-10">
26 <div class="content"><p>.layout-10-1 .content{margin-right:210px; margin-bottom:-30px;/**这里的margin-bottom:-30px;需要通过js来计算，取值为content区的高度，也可以给sidebar：margin-top:-30px;**/}</p></div>
27 <div class="sidebar"><p>.layout-10 .sidebar{}</p></div>
28 <p>这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
29 </div>
30 <div class="layout layout-10-1">
31 <div class="content"><p>.layout-10-1 .content{margin-right:210px;}</p></div>
32 <div class="sidebar"><p>.layout-10-1 .sidebar{float:right; margin-top:-30px;/**这里的margin-top:-30px;需要通过js来计算，取值为content区的高度，也可以给content：margin-bottom:-30px;后边的元素需要清除浮动**/}</p></div>
33 <p class="clear">.layout-10-1 p{clear:both;}<br/>这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
34 </div>
35
36 <div class="layout layout-11">
37 <div class="content"><p>.layout-11 .content{margin-left:210px;}</p></div>
38 <div class="sidebar"><p>.layout-11 .sidebar{position:absolute; left:10px; top:10px;}</p></div>
39 <p>这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
40 </div>
41
42 <div class="layout layout-11-1">
43 <div class="content"><p>.layout-11 .content{margin-left:210px;}</p></div>
44 <div class="sidebar"><p>.layout-11 .sidebar{position:absolute; left:10px; top:10px;}</p></div>
45 <p>这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
46 </div>3、复杂结构,内容在前，列表在后，能够很好的实现自适应布局，并且兼容性好。内容在前对于SEO优化很重要
1 <style type="text/css">
2 .layout{background-color:gray; padding:10px; border:10px solid orange; margin:10px 0; zoom:1;}
3 .layout:after{content:"";clear:both; display:block; height:0px; overflow:hidden;}
4 .wrap{}
5 .content{background-color:green; /*height:290px;*/}
6 .sidebar{background-color:blue; /*height:290px;*/ width:200px;}
7 p{color:#fff;font-family:arial; font-size:16px; line-height:30px;}
8 p.clear{clear:both;}
9
10 /**复杂结构布局**/
11 .layout-21{}
12 .layout-21 .wrap{ float:left; width:100%;}
13 .layout-21 .content{margin-left:210px;}
14 .layout-21 .sidebar{float:left; margin-left:-100%;}
15 .layout-22{}
16 .layout-22 .wrap{float:left; width:100%;}
17 .layout-22 .content{margin-right:210px;}
18 .layout-22 .sidebar{float:right; margin-left:-200px;}
19 .layout-23{}
20 .layout-23 .wrap{float:left; width:100%; margin-right:-200px;}
21 .layout-23 .content{margin-right:210px;}
22 .layout-23 .sidebar{float:left;}
23 .layout-24{}
24 .layout-24 .wrap{float:right; width:100%; margin-left:-200px;}
25 .layout-24 .content{margin-left:210px;}
26 .layout-24 .sidebar{float:left;}
27 </style>
28 <div class="layout layout-21">
29 <div class="wrap">
30 <div class="content">
31 内容区域,左漂浮
32 <p>
33 .layout-21 .wrap{ float:left; width:100%;}<br />
34 .layout-21 .content{margin-left:210px;}
35 </p>
36 </div>
37 </div>
38 <div class="sidebar">
39 列表区域
40 <p>
41 .layout-21 .sidebar{float:left; margin-left:-100%;}
42 </p>
43 </div>
44 <p class="clear">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
45 </div>
46
47 <div class="layout layout-22">
48 <div class="wrap">
49 <div class="content">
50 内容区域
51 <p>
52 .layout-22 .wrap{float:left; width:100%;}<br />
53 .layout-22 .content{margin-right:210px;}
54 </p>
55
56 </div>
57 </div>
58 <div class="sidebar">
59 列表区域
60 <p>
61 .layout-22 .sidebar{float:right; margin-left:-200px;}
62 </p>
63 </div>
64 <p class="clear">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
65 </div>
66
67 <div class="layout layout-23">
68 <div class="wrap">
69 <div class="content">
70 内容区域
71 <p>
72 .layout-23 .wrap{float:left; width:100%; margin-right:-200px;}<br />
73 .layout-23 .content{margin-right:210px;}
74 </p>
75
76 </div>
77 </div>
78 <div class="sidebar">
79 列表区域
80 <p>
81 .layout-2 .sidebar{float:left;}
82 </p>
83 </div>
84 <p class="clear">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
85 </div>
86
87 <div class="layout layout-24">
88 <div class="wrap">
89 <div class="content">
90 内容区域
91 <p>
92 .layout-24 .wrap{float:left; width:100%;}<br />
93 .layout-24 .content{margin-right:210px;}
94 </p>
95
96 </div>
97 </div>
98 <div class="sidebar">
99 列表区域
100 <p>
101 .layout-24 .sidebar{float:right; margin-left:-200px;}
102 </p>
103 </div>
104 <p class="clear">clear:both<br />这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
105 </div>转载于:https://www.cnblogs.com/qwguo/p/9903312.html
关于页面的多种自适应布局——两列布局相关推荐
- html布局(两列布局的常见方式)
描述:当前端开发者拿到ui设计稿,首先实现的便是页面布局:本节介绍常见的几种布局方式:当然这些布局方式不仅仅用来做整个页面的布局,在某个弹窗或者工具栏中都可以使用 1 两列自适应布局 1.1 第一个d ...
- H5+CSS3之如何简单的实现自适应一排两列布局
用FLEX设置一排两列 50% 的设置方法: HTML代码 <body><section><ul class="box"><li>& ...
- 常用布局简介（单列布局、两列布局、三列布局、sticky footer粘连布局）
常用布局简介 一.简介 网页布局对于一个前端开发者而言至关重要,掌握好布局知识有助于我们更好的实现CSS界面的设计和开发.布局是有限空间内的元素排列方式,因为页面设计横向不滚动,纵向无限延伸,所以大多 ...
- CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼
文章转自:http://www.cnblogs.com/honoka/p/5161836.html 今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽 ...
- CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼...
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
- CSS布局之两列布局
两列布局 两列布局一般情况下是指定宽与自适应布局,两列中左列是确定的宽度,右列是自动填满剩余所有空间的一种布局效果: 左列自适应, 右列定宽 float + margin 属性实现: float + ...
- 单列变双列css_css 两列布局中单列定宽单列自适应布局的6种思路
前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...
- 两列布局、三列适应布局、两列等高适应布局。
一. 两列布局:左侧定宽.右侧自适应. 四种方法 :flex .position.float和负外边距.外边距 1. 使用flex. <!DOCTYPE html> <html> ...
- CSS布局代码:两列布局实例
CSS两列布局,右侧固定,左侧自适应宽度 <div style="width:90%; margin:0 auto;"> <div style="wid ...
最新文章
- linux c select 服务器源码 简介
- 快速卷积与快速相关——MATLAB
- 反卷积(Deconvolution)、上采样(UNSampling)与上池化(UnPooling)加入自己的思考（pytorch函数）（二）
- shell监控磁盘使用情况
- rspec Could not find table
- java api存在问题改进措施_Sonar常见问题解决方案
- PHP从入门到精通 第3版pdf
- 华为员工标准岗位工资明细及分析
- DPDK-实战之load_balancer（负载均衡）
- VUE MVVM实现
- jquery checkbox选中事件监听
- E6-2019级航类第6次正式上机
- iphone 快捷指令打开 行程码
- class com.sun.mail.smtp.SMTPAddressFailedException: 550 5.1.1 recipient is not exist
- 12个漂亮的 CSS3 按钮实现方案
- ubuntu安装显卡问题
- BZOJ 4152 浅谈堆优化的SPFA算法
- Gstreamer学习笔记（4）：pad定义、连接、流动
- 【mmsegmentation】bug解决：Error: [Errno 95] Operation not supported: ‘epoch_1.pth‘ -＞ ‘lastest.pth‘
- 法规标准-ISO 11270标准解读(2014版)