div是块状元素，默认是独占据一行。
但是，如何让两个或多个块区域并列于一行？
块状元素有一个很重要的“float”属性，可以达成这种效果。float 属性也被称为浮动属性，这个词非常形象。
对前面的div元素设置浮动属性后，当前面的div元素留有足够的空白宽度时，后面的div元素将自动浮上来，和前面的div元素并列于一行。
float 属性的值有 left、right、none 和 inherit。float 属性值为 none 时，块状元素不会浮动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置 div 浮动</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#one {
width: 125px;
height: 120px;
background-color: #eee;
border: 1px solid #000;
float: left;
}
#two {
width: 200px;
height: 120px;
background-color: #eee;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="one">第1个div</div>
<div id="two">第2个div</div>
</body>
</html>
效果图
但是要注意：要是2个div并列于一行的前提是这一行有足够的宽度容纳2个div的宽度。
网友评论