首页 > 编程知识 正文

html让两个div同一行,在一个div里面让两个div并列

时间:2023-05-05 09:24:32 阅读:199506 作者:4689

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的宽度。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。