同行显示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都设置上该属性即可！ 

文章来源: liuzhen.blog.csdn.net，作者：Data-Mining，版权归原作者所有，如需转载，请联系作者。

原文链接：liuzhen.blog.csdn.net/article/details/77330578