发表新帖
发表新帖

Rowspan and colspan problems in IE

后端 未结
关注
1 1733
一向
一向 2021-01-24 23:21

So, I need to create table with complicated system of colspans and rowspans. You can look at that here

This is html:


              相关标签:
       

        

          1条回答        


        
    
                         				            
  • 
            
           
            
    
                              
                 
              
              
    
                
                  迷失自我        
                
              
    
                            
    
                2021-01-25 00:16
              
    
            
    
            
    
                                                                       

    Think of your layout as a 9 column grid where the content spans 1, 2 or 3 columns. Then use floats:
    


    

    

    #grid {
  width: 900px;
  overflow: hidden;
}
#grid div {
  float: left;
}
#grid .col-3-9 {
  width: 33.33%;
}
#grid .col-2-9 {
  width: 22.22%;
}
#grid .col-1-2 {
  width: 50%;
}
#grid img {
  display: block;
  width: 100%;
}
    

    <div id="grid">
  <div class="col-3-9">
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/gag.jpg">
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/diodella.jpg">
  </div>
  <div class="col-2-9">
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/ts2.jpg">
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/fc.jpg">
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/ic.jpg">
  </div>
  <div class="col-2-9">
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/gm.jpg">
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/ts1.jpg">
  </div>
  <div class="col-2-9">
    <div class="col-1-2">
      <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/mp.jpg">
    </div>
    <div class="col-1-2">
      <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/cd.jpg">
    </div>
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/43ai.jpg">
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/kor.jpg">
    <img src="http://welb-studio.com/wp-content/lenden-design/pictures/portfolio/enter.jpg">
  </div>
</div>
    

    

    

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
                             

        
        

          

            
            

              
              

            
    


                                 
              

            

                          
    

        
         

                
                

                  
                

                

                   看不清?
                

              

                                  

                    
   
                 
             
              
提交回复

            

          
        

      

          
 
     
 

        
热议问题