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;

}

第1个div
第2个div

401114221735

效果图

但是要注意:要是2个div并列于一行的前提是这一行有足够的宽度容纳2个div的宽度。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐