发表新帖
发表新帖

How to display items side-by-side without using tables?

后端 未结
关注
9 1829
野性不改
野性不改 2020-12-08 16:14

For example you want to display an image beside a text, usually I would do this:


        

          9条回答        


        
    
                    
  • 
            
            
    
                         
                 一向 
              
              
    
                
                   一向
                                             
                
                
                (楼主)
            
              
                  
    
                2020-12-08 16:33
              
    

            
    
            
    
              
              

    All these answers date back to 2016 or earlier... There's a new web standard for this using flex-boxes. In general floats for these sorts of problems is now frowned upon.
    


    HTML
    


    
  
  
    
    Text here
  
    

    

    


    CSS
    


    .image-txt-container {
  display: flex;
  align-items: center;
  flex-direction: row;
}

    


    Example fiddle: https://jsfiddle.net/r8zgokeb/1/
    
    
    
             
    
                                                        
    
            
    
            
    
              
                
                0
              
                   
                
               讨论(0)
              
                                                  
              
              
    
                          
             
       
          
              
    
                                       
    

    

                
    
                         
          
    • 
                              			
        

        
        

          

            
            

              
              

            
    


                                 
              

            

                          
    

        
         

                
                

                  
                

                

                   看不清?
                

              

                                  

                    
   
                 
             
              
提交回复

            

          
        

      

          
 
     
 

        
热议问题