CSS多列布局（实例）

前言

一列布局
二列布局
三列布局

1 一列布局

一列布局：

HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>一列布局</title>
</head>
<body>
<div class="head">head</div>
<div class="main">main</div>
<div class="foot">foot</div>
</body>
</html>CSS部分
div{text-align: center;}
.head{height: 60px;background-color:#fae1e1;}
.main{margin: 0 auto;height:300px;background-color:#e6686a;}
.foot{margin: 0 auto;background-color:red;}

效果图如下：

2 二列布局

二列布局代码如下（即左右布局），二列布局有多种方法，float margin（一侧定宽，一侧自动）、position margin（一侧定宽，一侧自动）、float 负margin（一侧定宽，一侧自动）等，本篇用的是设定两栏的宽度的百分比，随宽度自适应变化代码如下：

HTML部分
<!DOCTYPE html>
<html>
<head>
<title>二列布局</title>
</head>
<body>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</htmlCSS部分
body{ margin:0; padding:0; font-size:20px; font-weight:bold}
div{ text-align:center; line-height:50px}
.main{ width:80%; height:400px; margin:0 auto}
.left{ width:20%; height:400px; background:#e6686a; float:left}
.right{ width:80%; height:400px; background:#fae1e1; float:right}

效果图如下：

3 三列布局

三列布局（即左中右布局），三列布局有多种方法，float margin（两侧定宽，中间自适应）、position margin（两侧定宽，中间自适应）、float 负margin（两侧定宽，中间自适应）、float position margin（两侧自动，中间定宽）、position margin（两侧自动，中间定宽），本篇用的是float margin（两侧定宽，中间自适应），代码如下：

HTML部分
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>JS Bin</title>
</head>
<body>
<div class="left">left</div>
<div class="center">main</div>
<div class="right">right</div>
</body>
</html>CSS部分
body{ margin:0; padding:0; font-weight:bold}
div{ line-height:40px}
.left{height:400px; width:200px; position: absolute; left:0; top:0;background:#fae1e1;}
.right{ height:400px; width:200px; position:absolute; top:0;right:0;; background:#fae1e1}
.center{ height:400px; margin:0 200px; background:#e6686a}

效果图如下：

CSS多列布局（实例）相关推荐

CSS布局代码:两列布局实例
CSS两列布局,右侧固定,左侧自适应宽度 <div style="width:90%; margin:0 auto;"> <div style="wid ...
在php中页面布局 3列左右侧固定中间自适应居中,css三列布局--两边固定中间自适应和中间固定两边自适应...
三列布局本篇讲三列布局,面试常考题,自己总结的,如有什么问题,欢迎指出!我会用红色标注出主要作用部分,都是最精简的写法,,没有多余的修饰. 布局方式一:两边固定中间自适应 1.flex布局思路:将 ...
css三列布局--两边固定中间自适应和中间固定两边自适应
三列布局本篇讲三列布局,面试常考题,自己总结的,如有什么问题,欢迎指出!我会用红色标注出主要作用部分,都是最精简的写法,,没有多余的修饰. 布局方式一:两边固定中间自适应 1.flex布局思路:将 ...
css两列布局之基于BFC规则实现
css要实现常见的自适应两列布局的方式方法挺多. 这里讲的是利用设置overflow不为visible时会形成新的BFC来实现.至于什么是BFC,可以搜搜看先,基本都讲的差不多了.等有更多空余时间,专 ...
day32—CSS多列布局学习
转行学开发,代码100天--2018-04-17 关于多列布局,前期已经梳理过,今天的培训课程学习中再次提及,趁此也做个总结和检验. 多列布局的介绍参考: day08-css布局解决方案之多列布局关 ...
CSS三列布局（五种方式）
/*前提:左右宽度为300px,高度为100px,中间宽度自适应*/* {margin: 0;padding: 0; } <!DOCTYPE html> <html lang=&qu ...
html5+css 两列布局
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
html5+css 三列布局
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
图文混排作品HTML5利用css样式,DivCSS布局实例：很实用的图文混排CSS列表
CSS网页布局的一大特点就是列表元素的应用,在传统的表格布局中往往将列表元素作为表格来处理,这样的方式非但不具有语义还产生了许多不必要的代码. 今天我们共同学习一款"图文混排CSS列表&qu ...

CSS多列布局（实例）

1 一列布局

2 二列布局

3 三列布局

CSS多列布局（实例）相关推荐

最新文章

热门文章