利用CSS的float属性可以将元素并排，做出三列并排的布局。
如这样的效果
实现的原理：只要将3个元素设置float属性，属性值为left，同时指定不同比例的宽度，及高度。
下面是实现代码
<!DOCTYPE html><html> <head> <title>元素并排</title> <meta charset="UTF-8"> <style type="text/css"> body{margin:0px;padding:0px;} .column1{ float:left; 33.33333%; min-height:800px; } div{color:#fff;} .column2{ float:left; 33.33333%; min-height:800px; } .column3{ float:left; 33.33333%; min-height:800px; } </style> </head> <body> <h1>软件开发，成就梦想</h1> <div> <div class="column1">column1</div> <div class="column2">column2</div> <div class="column3">column3</div> </div> </body></html>两行三列
上面的例子是三列，每列宽度和高度都相同。
下面例子是两行三列，宽度一样，高度不同，运行效果如下：
<!DOCTYPE html><html> <head> <title>元素并排</title> <meta charset="UTF-8"> <style type="text/css"> body { 750px; color: #fff;} p { 230px; float: left; margin: 5px; padding: 5px; Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 16px; color: rgb(255, 255, 255); border-radius: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; auto !important; box-sizing: content-box !important; min-height: auto !important; white-space: pre !important;"> </style> </head> <body> <h1 style="color:#706fd3">软件开发，成就梦想</h1> <h2><a href="https://www.liyongzhen.com/">学编程，上利永贞网</a></h2> <p>CSS是一个描述HTML文档的样式语言。CSS描述HTML元素的显示方式。</p> <p>本教程将教你CSS从基础到网页布局，学完本教程，可以设计出漂亮的网站。本教程需要HTML知识为基础，学习HTML前往《HTML 教程》</p> <p>你只需下载一个Chrome浏览器和一个Notepad++一样的文本编辑器，另加一个取色器软件，无需其它工具。</p> <p>教程中的术语、名词、概念、原理，不需要死死记住，了解，再了解，能用自己的复述出来即可。 教程中的示例，刚刚学，有些地方可能不懂，这没关系，不会影响后面的学习，过一阵子回过送来，你会豁然开朗，原来如此呀。</p> <p>将示例代码，敲入你的文本编辑器，保存，用Chrome浏览器打开；这样的事做得越多，你越有自信。 <p>层叠样式表（英语：Cascading Style Sheets，简写CSS），又称串样式列表、级联样式表、串接样式表、阶层式样式表， 一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。</p> </body></html>在第2行一第一列出现了浮动，它跑到第一行的第3列下面。原因是第1行的第2列的高度比第1行第3例的高度高，挡住了第2行第1列。