代码如下：
<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
<style type="text/css">
#header{background-color: gray;}
#content{background-color: red;overflow: auto;}
#sidebar{background-color: blue; float: right;}
#sidebar2{background-color: green;float: left; width: 100px;}
#footer{background-color: yellow;clear: both;}
</style>
</head>
<body>
<div id="page">
<div id="header"><h1>这里是标题</h1></div>
<div class="box">
<div id="sidebar">
<p>侧边栏</p>
</div>
<div id="sidebar2">
<p>侧边栏2：地图投影，是将地球表面投影到地图平面的过程，将地理坐标转换为平面直角坐
标的过程。因为毕业论文需要，我重新回顾了一下地图投影的知识并且作了比较全面且简洁的总
结。如果你之前未系统了解过地图投影，又对地图投影感兴趣，这篇博文也许能成为一篇简洁务
实的阅读材料。</p>
</div>
<div id="content">
<p>这里是一些文字</P>
<p>再来一大段文字</P>
<p>地图投影，是将地球表面投影到地图平面的过程，将地理坐标转换为平面直角坐标的过程。
因为毕业论文需要，我重新回顾了一下地图投影的知识并且作了比较全面且简洁的总结。如果你
之前未系统了解过地图投影，又对地图投影感兴趣，这篇博文也许能成为一篇简洁务实的阅读材
料。</p>
</div>
</div>
<div id="footer"><p>没人关注的页脚</P></div>
</div>
</body>
</html>
这是一个使用浮动实现三列布局的效果，虽然简单，却很实用
浮动实现三列布局.png
学习笔记来自于 这篇文章
网友评论