📜  如何使用 CSS 并排浮动三个 div?

📅  最后修改于: 2022-05-13 01:56:42.925000             🧑  作者: Mango

如何使用 CSS 并排浮动三个 div?

可以使用 CSS 并排放置三个或更多不同的 div。使用 CSS 属性设置 div 的高度和宽度,使用 display 属性将 div 并排放置。

  • 向左飘浮;此属性用于那些将浮动在左侧的元素(div)。
  • 浮动:对;此属性用于那些将浮动在右侧的元素(div)。

示例 1:此示例使用 float 属性并排放置三个 div。

 
 
     
          
        
         
     
      
     
        
            

GeeksforGeeks

                           
                

Learn:

                It is a good platform to learn programming.                 It is an educational website. Prepare for                 the Recruitment drive  of product based                  companies like Microsoft, Amazon, Adobe                  etc with a free online placement preparation                  course.             
                             
                

GeeksforGeeks:

                The course focuses on various MCQ's & Coding                  question likely to be asked in the interviews                 & make your upcoming placement season efficient                 and successful.             
                           
                

Contribute:

                Any geeks can help other geeks by writing                 articles on the GeeksforGeeks, publishing                 articles follow few steps that are Articles                 that need little modification/improvement                 from reviewers are published first.             
        
                          

输出:

示例 2:此示例使用 float 属性并排放置三个 div。

 
 
     
      
        
         
     
      
    
        
          

GeeksforGeeks

                   
            
                             
                           
                

                    We can create as many div as many we want side by                     side with the same height and also with the                     different heights.                 

            
                           
                             
        
        
                         

输出:

示例 3:另一种使用 display 属性将三个 div 并排放置的方法。

  • 显示:表格;此属性用于行为类似于表格的元素 (div)。
  • 显示:表格单元格;此属性用于行为类似于 td 的元素 (div)。
  • 显示:表格行;此属性用于行为类似于 tr 的元素 (div)。
 
 
     
      
        
         
     
      
     
        
        

GeeksforGeeks

          
              
                  
                      
                          It is a good platform to learn programming.                         It is an educational website. Prepare for                         the Recruitment drive of product based                         companies like Microsoft, Amazon, Adobe etc                         with a free online placement preparation                          course.                     
                                             
                          The course focuses on various MCQ's &                         Coding question likely to be asked in                         the interviews & make your upcoming                         placement season efficient and successful.                      
                                             
                          Any geeks can help other geeks by writing                         articles on the GeeksforGeeks, publishing                         articles follow few steps that are Articles                         that need little modification/improvement                         from reviewers are published first.                     
                  
              
          
          
                                      

输出: