DIV+CSS 网页布局之：三列布局

1、宽度自适应三列布局

　　三列布局的原理和两列布局的原理是一样的，只不过多了一列，只需给宽度自适应两列布局中间再加一列，然后重新计算三列的宽度，就实现了宽度自适应的三列布局。

　　同样的道理，更多列的布局，其实和两列、三列的布局模式是一样的。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>三列布局</title>
 6 <style>
 7 *{margin:0;padding:0;}
 8 #herder{ 9     height:50px;
10     background:blue;
11 }
12 #main{13     width:100%;
14     overflow:hidden;
15 }
16 #main .main-left{17     width:25%;
18     height:800px;
19     background:red;
20     float:left;
21 }
22 #main .main-center{23     width:50%;
24     height:800px;
25     background:lightgreen;
26     float:left;
27 }
28 #main .main-right{29     width:25%;
30     height:800px;
31     background:pink;
32     float:right;
33 }
34 #footer{35     height:50px;
36     background:gray;
37 }
38 </style>
39 </head>
40 <body>
41 <div id="herder">页头</div>
42 <div id="main">
43     <div class="main-left">左列</div>
44     <div class="main-center">中间</div>
45     <div class="main-right">右列</div>
46 </div>
47 <div id="footer">页脚</div>
48 </body>
49 </html>

2、左右两列固定宽度，中间内容宽度自适应

　　要想实现左右两列固定宽度，中间宽度自适应的布局，那么使用浮动就做不到了，使用浮动之后页面就乱了，必须使用绝对定位来将三列固定在一行。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>两边固定中间自适应布局</title>
 6 <style>
 7 *{margin:0;padding:0;}
 8 #herder{ 9     height:50px;
10     background:blue;
11 }
12 #main{13     width:100%;
14     position:relative;
15 }
16 #main .main-left{17     width:200px;
18     height:800px;
19     background:red;
20     position:absolute;
21     left:0;
22     top:0;
23 }
24 #main .main-center{25     height:800px;
26     background:lightgreen;
27     margin:0 310px 0 210px;
28 }
29 #main .main-right{30     width:300px;
31     height:800px;
32     background:pink;
33     position:absolute;
34     right:0;
35     top:0;
36 }
37 #footer{38     height:50px;
39     background:gray;
40 }
41 </style>
42 </head>
43 <body>
44 <div id="herder">页头</div>
45 <div id="main">
46     <div class="main-left">左列</div>
47     <div class="main-center">设计网页的第一步就是设计版面布局，搭建网站结构，网页排版的合理性，在一定程度上也影响着网站整体的布局以及后期的优化。一个好的网站形象能更容易地吸引用户、留住用户。因此，网站首页第一屏的排版非常重要，很多时候能决定用户的去与留。</div>
48     <div class="main-right">右列</div>
49 </div>
50 <div id="footer">页脚</div>
51 </body>
52 </html>

转载于:https://www.cnblogs.com/Mtime/p/5272716.html

DIV+CSS 网页布局之：三列布局相关推荐

常用布局简介（单列布局、两列布局、三列布局、sticky footer粘连布局）
常用布局简介一.简介网页布局对于一个前端开发者而言至关重要,掌握好布局知识有助于我们更好的实现CSS界面的设计和开发.布局是有限空间内的元素排列方式,因为页面设计横向不滚动,纵向无限延伸,所以大多 ...
html三列布局和两列布局,CSS 常见两列布局、三列布局
一.两列布局: 方法一:采用position:absollute;并设置margin-left的值. #left{ position:absolute; width:300px; top:0px; l ...
单列布局、两列布局、三列布局
一. 单列布局 HTML 代码: 1 <div id="header"> 2 <h2>Page Header</h2> 3 < ...
flex两列布局以及三列布局
flex两列布局左固定右适应: <div class="a"><div class="a1"></div><div ...
web前端实战系列[1]——三列布局
1.代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
你不知道的三列布局之圣杯布局和双飞翼布局（超详细）
前言三列布局相信大家都见过,像上面淘宝.豆瓣等很多平台界面都有使用.他们用到的是圣杯布局和双飞翼布局.圣杯布局和双飞翼布局是一些大厂可能问的问题,圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边 ...
html三列布局中间固定,常见的三列布局（左右固定宽度，中间自适应）
实现css中的三列布局,左右固定宽度,中间自适应.三列布局方式的关键是怎么样才能使得在伸缩浏览器窗口的时候让中间的子元素宽度改变.比较常见的实现方案是:定位,浮动,css3中新特性flex布局,以及流 ...
两列布局、三列适应布局、两列等高适应布局。
一. 两列布局:左侧定宽.右侧自适应. 四种方法 :flex .position.float和负外边距.外边距 1. 使用flex. <!DOCTYPE html> <html> ...
html三列布局源码,HTML三列布局 - 黄柳淞的个人页面 - OSCHINA - 中文开源技术交流社区...
1.三列布局1 三列布局 body{padding: 0;margin: 0;} .left{width:33.3%;height: 500px;background-color: #ccc;floa ...
jqm的多列布局demo,html5的多列布局demo,多列布局的具体解说,html5开发实例具体解释...
因为移动设备屏幕宽度较小,所以一般不建议使用多列布局.但有时你可能须要并排放置一些元素(如button之类的). jQuery Mobile通过约定的类名ui-grid来提供了一种基于css的多列布局 ...

DIV+CSS 网页布局之：三列布局

1、宽度自适应三列布局

2、左右两列固定宽度，中间内容宽度自适应

DIV+CSS 网页布局之：三列布局相关推荐

最新文章

热门文章