在HTML中，如何让两个DIV在同一行显示?

把两个div放在一个父div里面，然后进行浮动即可。

下面我们一起来实现以下：

创建一个父div，然后创建两个子div，代码如下：

给div加上css样式，分别给他们设置背景颜色，父div可以不设置，子div设置绿色，然后给div加上浮动代码即可,"float:left"我们来写一下代码：

下面我们来看一下运行效果

DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。DIV在编程中又叫做整除，即只得商的整数。 DIV元素是用来为HTML（标准通用标记语言下的一个应用）文档内大块（block-level）的内容提供结构和背景的元素。

两种常用方法：

<p class="p_left">左左左左左左左</p><p class="p_right">右右右右右右右</p>。

一、

.p_left{float:left}。

.p_right{float:left}。

二、(中间如果有空格 他会留空格的 上面的就不会，你要块状也可以换成display:inline-block)。

.p_left{display:inline；}。

.p_right{display:inline}。

在界面设计的时候，经常需要将两个div在同一行显示。

如以下要将“第一个div”和“第二个div”显示在同一行：

<div id="id1">  /*外层div*/

<div id="id2" style="width:100pxheight:20px">第一个div</div>

<div id="id3" style="width:100pxheight:20px">第二个div</div>

</div>

只需要对id2和id3增加css样式即可，如下所示：

<div id="id1">  /*外层div*/

<div id="id2" style="width:100pxheight:20pxfloat:left">第一个div</div>

<div id="id3" style="width:100pxheight:20pxfloat:left">第二个div</div>

</div>

这样就可以了。

在HTML中让两个div并排显示，通常情况下有三种实现方式，包括:

（1）设置为行内样式，display:inline-block

（2）设置float浮动

（3）设置position定位属性为absolute

以下为三种方式的具体实现代码：

1、设置每个div的展现属性为行内样式，示例代码为：

<div class="app">

<div style="display:inline-blockbackground:#f00">div1</div>

<div style="display:inline-blockbackground:#0f0margin-left:10px">div2</div>

</div>

2、设置float浮动，示例代码为：

<div class="app">

<div style="float:leftbackground:#f00">div1</div>

<div style="float:leftbackground:#0f0margin-left:10px">div2</div>

</div>

3、设置position定位属性为absolute, 示例代码为：

<div class="app">

<div style="position: absolutewidth:100pxbackground:#f00">div1</div>

<div style="position: absoluteleft:100pxbackground:#0f0margin-left:10px">div2</div>

</div>

扩展资料：

css清除浮动方法

（1）添加新的元素 、应用 clear：both

.clear {

clear: both 

height: 0

height: 0

overflow: hidden

}

（2）父级div定义 overflow: auto

.over-flow {

overflow: auto

zoom: 1//处理兼容性问题

}

（3）伪类  :after 方法  outer是父div的样式

.outer { zoom:1}    /*==for IE6/7 Maxthon2==*/

.outer :after {

clear:both

content:'.'

display:block

width: 0

height: 0

visibility:hidden

}

参考资料来源：CSS官方文档：css-float

参考资料来源：CSS官方文档：css-Positioning

---