如何在同一行显示两个不同的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都设置上该属性即可!