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

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

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

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

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

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

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

情况1：设置了float的div是在left这边，而没有设置float的会认为那里没有元素，所以第二个还是在第一个的位置
情况2：都设置了float，那b就知道那个位置有一个div，所以b就再a后面
情况3：float元素只会漂移在之前元素的后面。
float：漂移元素，使他定在右边或者左边，而其他元素会分布在漂移元素周围
所以漂移元素必须要指定width

方法一：把div设为“行内块级元素”：

<style>
div {display:inline-block; border:1px solid #000}
</style>
<div>第一个div</div>
<div>第二个div</div>

方法二：使用浮动：

<style>
div {float:left; border:1px solid #000}
br {clear:both}
</style>
<div>第一个div</div>
<div>第二个div</div>
<br/>

方法三：使用flex布局：

<style>
main {display:flex; flex-direction:row;}
sub {border:1px solid #000}
</style>
<div class=main>
   <div class=sub>第一个div</div>
   <div class=sub>第二个div</div>
</div>

还有其他多种方法实现，就不一一列出了

首先：把这两个div写在html代码中，如下代码所示。
<div class="content">第一个div</div>
<div class="content">第二个div</div>
其次：再css样式里面对这两个div控制，让其左浮动，或者右浮动，根据自己需要调整。下面给出例子，div的高是253px，宽是280px，让其两个左浮动，这样两个div就并排在一行了。
content {
height: 253px;
width: 280px;
float: left;
}
最后，考虑到div的布局不规整，可以用一个大的div对其加以控制，可以写成这样，这样就可以了。
<div>
<div class="content">第一个div</div>
<div class="content">第二个div</div>
</div>

div属于块元素，通俗的讲，块元素会占一整行。如果让一行显示两个div有两种方法。

1、让两个想并排的div的转换成行内元素

div{display:inline;}

2、让两div设置固定宽度，然后让其浮动显示即可。

div{width:50%;float:left;}

注意也可将div宽度设置成像素宽度，但两个div的宽度加起来不能大于父级div的宽度，只能 小于或等于。

让两个div并排方法：
可以采用浮动的方法，只要宽度足够，两个div就可以在一排显示。打div里面包含两个小div。
方法如下：
1、创建一个大div。
代码如下：
#main {float:left;border:1px width:100%; }
2、创建一个左边小div
代码如下：
#left{float:left;border:1px width:40%; }
3、创建一个右边小div
代码如下：
#right {float:left;border:1px width:40%; }
4、制作成css文件，或者直接添加到网页上，就可以实现并排显示。

1、在需要的html页面的body部分敲入代码，基本上是一个父级DIV下面有三个子级DIV。

<div>
    <div></div>
    <div></div>
    <div></div>
</div>

2、然后在三个子div中输入文字，然后在浏览器中测试，查看效果，可以看到默认情况下三个div是竖排显示的。

<div>
    <div>明天</div>
    <div>你好</div>
    <div>牛奶咖啡</div>
</div>

3、接下来对三个div进行class设置，如下图所示。

4、然后只需要为三个中的前两个设置float:left属性，最后一个设置float:right属性，或者是float:left属性，都可以实现并排排列。

5、之后再到浏览器中查看，就可以发现三个div并排显示了。如下图所示。

---