100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > HTML如何让两个div并排在一行 如何实现两个或多个div并列于一行

HTML如何让两个div并排在一行 如何实现两个或多个div并列于一行

时间:2022-03-04 18:58:42

相关推荐

HTML如何让两个div并排在一行 如何实现两个或多个div并列于一行

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

效果图

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。