📜  如何使用 HTML 和 CSS 在同一个 div 中创建三个框?

📅  最后修改于: 2021-08-29 12:06:58             🧑  作者: Mango

三个或更多不同的 div 可以在同一个 div 中使用 CSS 并排放置。这可以通过 flexbox 实现——但请注意,您需要使用包装 div 并为每个 div 应用不同的 flex-directions 以使网格布局工作。使用 CSS 属性设置 div 的高度和宽度。

句法:

flex: flex-grow flex-shrink flex-basis 
           | auto | initial | inherit;
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
flex-grow: number | initial | inherit;

示例:此示例说明如何使用常规 HTML 和 CSS 在同一个 div 中创建 3 个框。



  

    
  
    
        How to create 3 boxes 
        in the same div using
        HTML and CSS ?
    
  
    

  

    
        
            GeeksforGeeks 1         
           
            GeeksforGeeks 2         
           
            
                GeeksforGeeks 4             
            
                
                    GeeksforGeeks 5                 
                
                    GeeksforGeeks 6                 
                
                    GeeksforGeeks 7                 
            
            
                GeeksforGeeks 8             
        
    
  
Output: