在HTML中，让两个DIV在同一行显示,就是通过float属性来设置的，我们可以通过设置3个div，然后第一个div包裹住其他2个div，然后在设置宽高就可以了。
我提交一段代码：
<html><head><title>DIV的同行测试</title></head><body><div><div style='flaot:left; width:330px; height:200px;'><p>我是左边的固定测试文字</p>
</div><div style='flaot:left; width:330px; height:200px;'><p>我是右边的固定测试文</p></div></div></body></html>。
DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。DIV在编程中又叫做整除，即只得商的整数。 DIV元素是用来为HTML（标准通用标记语言下的一个应用）文档内大块（block-level）的内容提供结构和背景的元素。
当我们使用 CSS-P 的时候， 我们主要把它用在 DIV（division）tag 上。当你把文字，图像，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。
所以当你以后看到这些名词的时候，你就知道它们是指一段在 DIV 中的 HTML。使用 DIV 的方法跟使用其他 tag 的方法一样：如果单独使用 DIV 而不加任何 CSS-P, 那么它在网页中的效果和不使用是一样的。
但当我们把 CSS-P 用到 DIV 中去以后，我们就可以严格设定它的位置。首先我们需要给这个可以被 CSS-P 控制的 DIV 一个 ID 或说是它的名字。比如说我们给下面这个 DIV 的名字是 truck。
给名字的目的是我们以后可用JavaScript来控制它， 比如说移动它或改变它的一些性质等等。给层次取什么名字是随意的，名字可以是任何英文字母和数字，但第一个必须是字母。有两种把 CSS-P 应用到 DIV 的方法。
使用工具：
HBuilder.exe
效果：
方法一：
代码含义：
width:100px; 宽100像素。
height:50px; 高50像素。
background: #ccc; 背景颜色灰色。
background: #678fff; 背景颜色蓝色。
float:left; 元素向左浮动。
实现原理：
float:left; 可以使元素向左靠拢，宽度不够再往下排列。
代码原件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{padding: 0px; margin: 0px;}
.div1{width: 100px; height: 50px; background: #ccc;float: left;}
.div2{width: 100px; height: 50px; background: #678fff;float: left;}
</style>
</head>
<body>
<div class="div1">左</div>
<div class="div2">右</div>
</body>
</html>
方法二：
代码含义：
width:100px; 宽100像素。
height:50px; 高50像素。
background: #ccc; 背景颜色灰色。
background: #678fff; 背景颜色蓝色。
position: absolute; 使元素绝对定位。
margin-left: 30px; 左边外边距30像素。
实现原理：
position: absolute; 可以使元素在整个页面绝对定位。
代码原件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{padding: 0px; margin: 0px;}
.div1{width: 100px; height: 50px; background: #ccc;position: absolute;}
.div2{width: 100px; height: 50px; background: #678fff;position: absolute; margin-left: 100px;}
</style>
</head>
<body>
<div class="div1">左</div>
<div class="div2">右</div>
</body>
</html>
两个div放在同一行，我想到了三种方法，这里我们举例说明（假设div的id分别为div1和div2）：
1、使用浮动：
#div1 {
width: 100px;
height: 100px;
float: left;
clear: left;
}
#div2 {
width: 100px;
height: 100px;
float: right;
clear: right;
}2、使用display: inline-block：
#div1 {
width: 100px;
height: 100px;
display: inline-block;
}
#div2 {
width: 100px;
height: 100px;
display: inline-block;
}3、使用绝对定位：
#div1 {
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
}
#div2 {
width: 100px;
height: 100px;
position: absolute;
left: 101px;
top: 0;
}
