如何将两个div并列排在同一行

Question

这是两个div的CSS：
#left {
width:131px;
height:311px;
position:relative;
left:33px;
top:215px;
}
#biaodan {
width:340px;
height:222px;
position:relative;
left:322px;
top:215px;
float:inherit;
}

这是div：
<div id="login" >
<div id="left" >
<table cellpadding="0" cellspacing="0" border="0;">
<tr>
<td><img src="images/login3_r4_c2.gif" /></td>
</tr>
<tr>
<td><img src="images/login3_r5_c2.gif" /></td>
</tr>
<tr>
<td><img src="images/login3_r6_c2.gif" /></td>
</tr>
</table>
</div>
<div id="biaodan" >
<table width="340" height="222" class="shuru"border="1" cellpadding="0" cellspacing="0">
<tr>
<td>Email地址</td>
<td><input type="text" id="search_1" class="search_box"/></td>
</tr>
<tr>
<td>登陆密码</td>
<td><input type="text" id="search_2" class="search_box"/></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="text" id="search_3" class="search_box"/></td>
</tr>
<tr>
<td>验证码</td>
<td><input type="text" id="search_4" class="search_box"/></td>
</tr>
</table>
</div>
</div>

Answer 1

想要将两个或多个div并列排在同一行，需要将div元素的float属性值设为left，靠左悬浮的意思，同时也要将想要并列的div套在一个大div里，这样改变浏览器宽度，div也还是成一排。

以下是具体演示步骤：

1、打开一个HTML文件编辑器。先在里面输入HTML的基本元素。

2、在body标签里添加一个大div来容纳并列的div。

3、在大div里添加想要并列的div元素，并在style属性里添加float：left即可

4、运行结果如下图。无论如何变换浏览器宽度，div都是一行展示出来。

Answer 2

使用css的float样式就可以实现将DIV并列排在同一行，代码如下：

<style>
.box1 {width:100px; float:left; display:inline;border:red 1px solid;}
.box2 {width:100px; float:left; display:inline;border:green 1px solid;}
</style>
<div class="container">
<div class="box1">121212</div>
<div class="box2">455656</div>
</div>

效果如下：

相关说明：

float 属性定义元素在哪个方向浮动。

可能的值

值       描述

left    元素向左浮动。 

right    元素向右浮动。   

none    默认值。元素不浮动，并会显示在其在文本中出现的位置。 

inherit    规定应该从父元素继承 float 属性的值。    

Answer 3

设置两个div的浮动：如：float:left，不行的话，设置一下display：block