div是块状元素,默认是独占据一行。
但是,如何让两个或多个块区域并列于一行?
块状元素有一个很重要的“float”属性,可以达成这种效果。float 属性也被称为浮动属性,这个词非常形象。
对前面的div元素设置浮动属性后,当前面的div元素留有足够的空白宽度时,后面的div元素将自动浮上来,和前面的div元素并列于一行。
float 属性的值有 left、right、none 和 inherit。float 属性值为 none 时,块状元素不会浮动。
设置 div 浮动* {
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;
}
效果图
但是要注意:要是2个div并列于一行的前提是这一行有足够的宽度容纳2个div的宽度。