关于页面的多种自适应布局——三列布局

简单结构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 .more{background-color:red; width:150px;}
 8 p{color:#fff;font-family:arial; font-size:16px; line-height:30px;}
 9 p.clear{clear:both;}
10 /**简单结构1，列表在前，内容在后**/
11 .layout-1{}
12     .layout-1 .sidebar{float:left;}
13     .layout-1 .more{float:right;}
14     .layout-1 .content{margin:0px 160px 0px 210px; _margin:0px 157px 0 207px; /*IE6下的3像素外边距问题*/}
15 .layout-1-1{}
16     .layout-1-1 .sidebar{float:right;}
17     .layout-1-1 .more{float:left;}
18     .layout-1-1 .content{margin:0px 210px 0px 160px; _margin:0px 207px 0 157px; /*IE6下的3像素外边距问题*/}
19 .layout-3{position:relative;}
20     .layout-3 .sidebar{position:absolute; left:10px; top:10px;}
21     .layout-3 .more{position:absolute; right:10px; top:10px;}
22     .layout-3 .content{margin:0px 160px 0 210px;}
23 .layout-3-1{position:relative;}
24     .layout-3-1 .sidebar{position:absolute; right:10px; top:10px;}
25     .layout-3-1 .more{position:absolute; left:10px; top:10px;}
26     .layout-3-1 .content{margin:0px 210px 0 160px ;}
27 </style>
28 <div class="layout layout-1">
29     <div class="sidebar"><p>.layout-1 .sidebar{float:left;}</p></div>
30     <div class="more"><p>.layout-1 .more{float:right;}</p></div>
31     <div class="content"><p>.layout-1 .content{margin:0px 160px 0px 210px; _margin:0px 157px 0 207px; /*IE6下的3像素外边距问题*/}</p></div>
32     <p class="clear">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
33 </div>
34 <div class="layout layout-1-1">
35     <div class="sidebar"><p>.layout-1-1 .sidebar{float:right;}</p></div>
36     <div class="more"><p>.layout-1 .more{float:left;}</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-3">
42     <div class="sidebar"><p>.layout-3 .sidebar{position:absolute; left:10px; top:10px;}</p></div>
43     <div class="more"><p>.layout-3 .more{position:absolute; right:10px; top:10px;}</p></div>
44     <div class="content"><p>.layout-3 .content{margin:0px 160px 0px 210px;}</p></div>
45     <p class="clear">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
46 </div>
47 <div class="layout layout-3-1">
48     <div class="sidebar"><p>.layout-3 .sidebar{position:absolute; right:10px; top:10px;}</p></div>
49     <div class="more"><p>.layout-3 .more{position:absolute; left:10px; top:10px;}</p></div>
50     <div class="content"><p>.layout-3 .content{margin:0px 210px 0px 160px;}</p></div>
51     <p>这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
52 </div>

简单结构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 .more{background-color:red; width:150px;}
 8 p{color:#fff;font-family:arial; font-size:16px; line-height:30px;}
 9 p.clear{clear:both;}
10 /**简单结构2，内容在前，列表在后**/
11 .layout-10{}
12     .layout-10 .content{margin:0px 210px -60px 160px;}
13     .layout-10 .sidebar{float:right;}
14     .layout-10 .more{float:left;}
15
16 .layout-10-1{}
17     .layout-10-1 .content{margin:0px 210px 0px 160px;}
18     .layout-10-1 .sidebar{float:right; margin-top:-30px;}
19     .layout-10-1 .more{float:left; margin-top:-30px;}
20 .layout-11{position:relative;}
21     .layout-11 .content{margin-left:210px;}
22     .layout-11 .sidebar{position:absolute; left:10px; top:10px;}
23 .layout-11-1{position:relative;}
24     .layout-11-1 .content{margin-right:210px;}
25     .layout-11-1 .sidebar{position:absolute; right:10px; top:10px;}
26 </style>
27 <div class="layout layout-10">
28     <div class="content"><p>.layout-10 .content{margin:0px 210px -60px 160px;}/**这里的margin-bottom:-60px;需要通过js来计算，取值为content区的高度，也可以给sidebar：margin-top:-30px;**/}</p></div>
29     <div class="sidebar"><p>.layout-10 .sidebar{float:right;}</p></div>
30     <div class="more"><p>.layout-10 .more{float:left;}</p></div>
31     <p class="clear">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
32 </div>
33 <div class="layout layout-10-1">
34     <div class="content"><p>.layout-10-1 .content{margin:0px 210px 0px 160px;}</p></div>
35     <div class="sidebar"><p>.layout-10-1 .sidebar{float:right; margin-top:-30px;}/**这里的margin-top:-30px;需要通过js来计算，取值为content区的高度，也可以给content：margin-bottom:-30px;后边的元素需要清除浮动**/}</p></div>
36     <div class="more"><p>.layout-10-1 .more{float:left; margin-top:-30px;}</p></div>
37     <p class="clear">.layout-10-1 p{clear:both;}<br/>这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
38 </div>

复杂结构,内容在前，列表在后，能够很好的实现自适应布局，并且兼容性好。内容在前对于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 .more{background-color:red; width:150px;}
 8 p{color:#fff;font-family:arial; font-size:16px; line-height:30px;}
 9 p.clear{clear:both;}
10 /**复杂结构布局**/
11 .layout-21{}
12     .layout-21 .wrap{ float:left; width:100%;}
13     .layout-21 .content{margin:0px 160px 0 210px;}
14     .layout-21 .sidebar{float:left; margin-left:-100%;}
15     .layout-21 .more{float:right; margin-left:-150px;}
16 .layout-22{}
17     .layout-22 .wrap{float:left; width:100%;}
18     .layout-22 .content{margin-right:210px;}
19     .layout-22 .sidebar{float:right; margin-left:-200px;}
20 .layout-23{}
21     .layout-23 .wrap{float:left; width:100%; margin-right:-200px;}
22     .layout-23 .content{margin-right:210px;}
23     .layout-23 .sidebar{float:left;}
24 .layout-24{}
25     .layout-24 .wrap{float:right; width:100%; margin-left:-200px;}
26     .layout-24 .content{margin-left:210px;}
27     .layout-24 .sidebar{float:left;}
28 </style>
29 <div class="layout layout-21">
30     <div class="wrap">
31         <div class="content">
32             <p>.layout-21 .wrap{ float:left; width:100%;}<br />.layout-21 .content{margin-left:210px;}</p>
33         </div>
34     </div>
35     <div class="sidebar">
36         <p>.layout-21 .sidebar{float:left; margin-left:-100%;/*如果最外边的div.layout,设置了border或者padding的话，那么ie6下的边距表现不对*/}</p>
37     </div>
38     <div class="more"><p>.layout-21 .more{float:right; margin-right:-100%;}</p></div>
39     <p class="clear">是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p>
40 </div>

原文地址：https://www.cnblogs.com/qwguo/p/9903348.html

时间： 2024-10-13 23:27:28

关于页面的多种自适应布局——三列布局的相关文章

CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼

今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞翼之外,循序渐进地介绍一下我们可以如何实现一个三列布局. 1. 首先,使用浮动布局来实现一下 See the Pen float-three-columns by xal821792703 (@honoka) on CodePen. 左侧元素与右侧元素优先渲染,分别向左和向右浮动 中间元素在文档流的

CSS 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题

一: 右侧固定宽度 左侧自适应  第一种方法:左侧用margin-right,右侧float:right  就可以实现.     HTML代码可以如下写:    <div>        <a href="" target="_blank">我是龙恩</a>    </div> <div>        <a href="" target="_blank">

简单的CSS网页布局--三列布局

三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>三列自适应</title> 6 <style type="text/

布局-三列布局（定宽+自适应+定宽）

两侧定宽中间自适应 方案一:float+margin+(fix) 结构: 1 <div class="parent"> 2 <div class="left"><p>left</p></div> 3 <div class="center-fix"> 4 <div class="center"> 5 <p>center</p&g

网页布局——三列布局（左侧和右侧固定，中间自适应）

一:flex弹性布局 <!DOCTYPE> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{padding: 0;margin: 0;} body{ display: flex; } .left,.center,.right{ height: 200px; } .left

css实现三列布局，左右固定值，中间自适应。

这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>三列布局,左右固定值,中间自适应</title> <style type="text/css"> .container{p

三列布局，中间自适应，关于float和positon方法

三列布局,中间自适应,尝试了两种方法float.mydiv{ background-color: #eee; margin:20px; padding: 20px; border: solid 1px #999; overflow: auto; } .left { float: left; width: 160px; height: 100px; background: blue; padding: 20px; } .right{ float: right; width: 80px; heigh

特殊的三列布局-左右两列宽度固定，中间自适应

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化

第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link rel="stylesheet" type="text/css" href="task0001.css"> </head> <body> <div class="wrap"> <di