CSS元素并排
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS元素并排
利⽤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>
<h2><a href="">学编程，上利永贞⽹</a></h2>
<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="">学编程，上利永贞⽹</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列。