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

HTML如何让两个div并排在一行,如何实现两个或多个div并列于一行相关推荐

css让四个div并排显示,css如何让两个div并排显示？
让两个Div并排显示的方法有很多,使用display的inline属性.通过设置float来让Div并排显示都可以实现,下面我们来看一下CSS实现两个div并排显示的方法. 让两个Div并排显示一. ...
HTML页面中使两个div并排显示
在HTML中实现两个div并排显示,方法如下: 方法1:设置float浮动对需要并排显示的div设置样式:style="float:left;" <div style=&q ...
div 左右并排,使用CSS如何让两个div并排显示
用CSS如何让两个DIV盒子并排体现呢? 各人知道默认情况下DIV是独占一排的,DIV不设置任何CSS格局,这个DIV盒子都邑独有一行踊跃换行. 运用CSS让两个DIV并排闪现,排成一排显示思空见贯方 ...
让两个Div并排显示的多种方法
http://www.jb51.net/css/140705.html 让两个Div并排显示的方法有很多,使用display的inline属性.通过设置float来让Div并排显示都可以实现,感兴趣的 ...
在HTML中实现两个div并排显示
在HTML中实现两个div并排显示在HTML中让两个div并排显示,通常情况下有三种实现方式,包括: (1)设置为行内样式,display:inline-block (2)设置float浮动 (3) ...
Summary_HTML中让两个div并排显示
在HTML中让两个div并排显示,通常情况下有三种实现方式,包括: (1)设置为行内样式,display:inline-block (2)设置float浮动 (3)设置position定位属性为abs ...
如何让两个div并排布局？
效果前: 效果后: 原因:div为块级元素,独占一行过程:1.当单独对第一个div添加"float:left;",会出现以下效果分析:a.将div的宽高设置不同观看效果.b.设 ...
html css 3 div并排,CSS-并排对齐两个div
CSS-并排对齐两个div 这个问题已经在这里有了答案: 并排对齐元素 3个答案我有一个小问题. 我正在尝试使用CSS并排对齐两个div,但是,我希望将中心div在页面中水平居中放置,我通过使用以 ...
HTML如何让两个div并排在一行,怎么让两个div并排同行显示
如何让两个div并排同行显示前段时间在做界面的时候,想要实现个两个DIV并排的界面,做之前想着挺简单的,只要将一个div浮动就可以了.然后就测试了一下.下面是部分代码自己测试代码 DIV1 DI ...
两个div并排显示 div居中显示
div并排显示的两种方法 float:left display: inline-block; div居中显示.文字居中显示 text-align: center;margin: 0 auto

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

HTML如何让两个div并排在一行,如何实现两个或多个div并列于一行相关推荐

最新文章

热门文章