如何使两个div在同一行显示_两个div在一行

作者：知新_RL | 2024-07-23 00:57:15

踩

两个div在一行

在CSS中，div属于块级元素，每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（float浮动后除外）。两个块级元素连续编辑时，会在页面自动换行显示。所以默认情况下，2个div是无法显示在同一行的，必须通过样式属性去修改。

解决方方法1：display:inline，将其变成行级元素，这样2个div就会排在同一行。

      
   1. 
   <div style="width:400px;height:300px;?border-width:1px;border-style:solid;border-color:#FFDEAD;"> 
  
   2. 
           <div style="background-color:#6495ED;width:100px;height:100px;display:inline;"></div> 
  
   3. 
           <div style="background-color:#C0FF3E;width:100px;height:100px;display:inline;"></div> 
  
   4. 
           <div style="background-color:#8A2BE2;width:100px;height:100px;display:inline;"></div> 
  
   5. 
   </div>

解决方法2：使用float

      
   1. 
   <div style="width:700px;height:500px;?border-width:1px;border-style:solid;border-color:#FFDEAD;"> 
  
   2. 
           <div style="background-color:#6495ED;width:100px;height:100px;float:left;"></div> 
  
   3. 
           <div style="background-color:#C0FF3E;width:100px;height:100px;float:left;"></div> 
  
   4. 
           <div style="background-color:#C0FF3E;width:100px;height:100px;float:right;"></div> 
  
   5. 
            
   6. 
           <!--必须清除浮动,才能换行--> 
  
   7. 
           <div style="background-color:#8A2BE2;width:100px;height:100px;clear:both;"></div> 
  
   8. 
   </div>

使用inline，2个div之间默认是有缝隙的，不会刚好贴在一起；使用float，会影响后续的div，必须通过clear清除。

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】