html布局，下面怎么使两个div在同一行显示？_随笔

实现两个DIV盒子并排，一行只显示两列DIV布局，使用width宽度+float浮动即可实现一行显示两列DIV布局。

<!DOCTYPE html>

<html>

<head>

<title>两个DIV并排</title>

<style>

.div-a{ float:leftwidth:49%border:1px solid #F00}

.div-b{ float:leftwidth:49%border:1px solid #000}

</style>

</head>

<body>

<div class="div-a">第一个DIV盒子</div>

<div class="div-b">第二个DIV盒子</div>

</body>

</html>

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

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

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

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

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

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

方法1：将ID为infoOutput里面的<div>设置行内样式。<div>本身是一个块元素，本来就占据一行，此时应将<div>设为行内元素即可。

#infoOutput div { display: inline-block}

方法2：建议将ID为infoOutput里面的<div>改为更为语义化的<span>元素。

欢迎分享，转载请注明来源：内存溢出

html布局，下面怎么使两个div在同一行显示？