同行显示div

如何在同一行显示两个不同的div标签，看代码：

 

<div style="width:100px;height:100px;">
    <div style="border: 1px solid #555; width:250px;height:55px;margin-left: 50px;margin-top: 5px">
        <p>first div</p>
    </div>
</div>
<div style="width:100px;height:100px;">
    <div style="border: 1px solid #555; width:250px;height:55px;margin-left: 50px;margin-top: 5px">
        <p>second div</p>
    </div>
</div>

这样的结果就是，两个div是分两行显示的，如图所示。

如果想同行显示应该怎么做呢，上代码：

 

<div style="width:100px;height:100px;float:left">
    <div style="border: 1px solid #555; width:250px;height:55px;margin-left: 50px;margin-top: 5px">
        <p>first div</p>
    </div>
</div>
<div style="width:100px;height:100px;float:left">
    <div style="border: 1px solid #555; width:250px;height:55px;margin-left: 220px;margin-top: 5px">
        <p>second div</p>
    </div>
</div>

这样显示的结果就是我们想要的了，效果如图：

 

实现这个效果的关键就是样式属性包含“float:left”，同理，如果想实现三个或者更多的div同行显示，那就把相应的div都设置上该属性即可！