<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3之前的布局</title>
<style>
.div1,.div2{
width:320px;
float:left;
background:green;}
.div1{ margin-right:30px;}
.div3{
clear:both;
width:100%;
height:80px;
float:none;
background:#000;
color:#fff;}
</style>
</head>
<body>
<div class="div1">
<p>阅谁问君诵，水落清香浮。</p>
<p>阅谁问君诵，水落清香浮。</p>
<p>阅谁问君诵，水落清香浮。</p>
<p>阅谁问君诵，水落清香浮。</p>
<p>阅谁问君诵，水落清香浮。</p>
</div>
<div class="div2">
<p>阅谁问君诵，水落清香浮。</p>
<p>阅谁问君诵，水落清香浮。</p>
<p>阅谁问君诵，水落清香浮。</p>
<p>阅谁问君诵，水落清香浮。</p>
<p>阅谁问君诵，水落清香浮。</p>
<p>阅谁问君诵，水落清香浮。</p>
</div>
<div class="div3">备案信息</div>
</body>
</html>
效果图：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3之前的布局</title>
<style>
.cont{
width:100%;
-webkit-column-width:150px;
-moz-column-width:150px;
-webkit-column-gap:50px;
-moz-column-gap:50px;
-webkit-column-rule:solid 1px #909090;
-moz-column-rule:solid 1px #909090;}
.footer{
width:100%;
height:80px;
background:#000;
color:#fff;
text-align:center;}
</style>
</head>
<body>
<div class="cont">
阅谁问君诵，水落清香浮。
阅谁问君诵，水落清香浮。
阅谁问君诵，水落清香浮。
阅谁问君诵，水落清香浮。
阅谁问君诵，水落清香浮。
阅谁问君诵，水落清香浮。
阅谁问君诵，水落清香浮。
阅谁问君诵，水落清香浮。
阅谁问君诵，水落清香浮。
阅谁问君诵，水落清香浮。
阅谁问君诵，水落清香浮。
阅谁问君诵，水落清香浮。
阅谁问君诵，水落清香浮。
阅谁问君诵，水落清香浮。
阅谁问君诵，水落清香浮。
阅谁问君诵，水落清香浮。
</div>
<div class="footer">备案信息</div>
</body>
</html>
效果图：
相关推荐
第1章 PowerPoint简介 3 1.1 使用PowerPoint的人及原因 3 1.1.1 销售 4 1.1.2 市场营销 5 1.1.3 人力资源 5 1.1.4 教育与培训 6 1.1.5 旅馆和饭店管理 7 1.1.6 俱乐部和社团 7 1.2 PowerPoint 2007...
第1章 PowerPoint简介 3 1.1 使用PowerPoint的人及原因 3 1.1.1 销售 4 1.1.2 市场营销 5 1.1.3 人力资源 5 1.1.4 教育与培训 6 1.1.5 旅馆和饭店管理 7 1.1.6 俱乐部和社团 7 1.2 PowerPoint 2007...
- 分栏设置：根据需求设置多栏布局。 - 制表位：设置对齐方式和间距。 - 插入符号：使用“插入”选项卡下的“符号”功能。 - 插入数学公式：使用“插入”选项卡下的“公式”功能。 - 作文表格制作方法：使用...
- **知识点**: 在文档编辑软件中，分栏命令可以实现将文档内容分为多栏显示的效果，而非仅仅局限于两栏。 - **解析**: “分栏”命令允许用户将文档分为两栏以上，具体数量根据所使用的软件版本和个人需求而定。 ###...
6. 分栏符：插入分栏符可以将页面分为两栏或多栏，是文档排版的一种方式。 7. 打印批注：在Word2010中，批注默认不会打印，但可以设置打印。 8. 编辑标记：分页符、分节符等编辑标记在普通视图、Web版式视图和阅读...