利用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;
width:33.33333%;
min-height:800px;
}
div{color:#fff;}
.column2{
float:left;
width:33.33333%;
min-height:800px;
}
.column3{
float:left;
width: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 {
width: 750px;
color: #fff;}
p {
width: 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; width: 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列。