发表新帖
发表新帖

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

后端 未结
关注
9 1796
野性不改
野性不改 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:47
              
    
            
    
            
    
                                                                       

    What about display:inline?
    


    <html>
      <img src='#' style='display:inline;'/>
      <p style='display:inline;'> Some text </p>
</html>

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  孤独总比滥情好        
                
              
    
                            
    
                2020-12-08 16:49
              
    
            
    
            
    
                                                                       

    Usually I do this:
    


    <div>
   <p> 
       <img src='1.jpg' align='left' />
       Text Here
   <p>
</div>

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  醉梦人生        
                
              
    
                            
    
                2020-12-08 16:51
              
    
            
    
            
    
                                                                       

    Try calling the image in a <DIV> tag, which will allow a smoother and faster loading time. Take note that because this is a background image, you can also put text over the image between the <DIV></DIV> tags. This works great for custom store/shop listings as well...to post a cool " Sold Out! " overlay, or whatever you might want.
    


    Here is the pic/text- sided by side version, which can be used for blog post and article listing:
    


    <div class="whatever_container">
<h2>Title/Header Here</h2>
 <div id="image-container-name"style="background-image:url('images/whatever-this-is-named.jpg');background color:#FFFFFF;height:75px;width:20%;float:left;margin:0px 25px 0px 5px;"></div>
<p>All of your text goes here next to the image.</p></div>

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
   
                                  

        
        

          

            
            

              
              

            
    


                                 
              

            

                          
    

        
         

                
                

                  
                

                

                   看不清?
                

              

                                  

                    
   
                 
             
              
提交回复

            

          
        

      

          
 
     
 

        
热议问题