2019-09-25 设置同行多个并列块出现的一些问题

设置同行多个并列块显示

1. 设置父元素宽高,fontsize为0,解决空格问题
2. 设置子元素的fontsize不为0,才可以显示,如果统一高度,就设置一个定高,宽度可以感觉要求用百分比,因为inline-block,如果字段过长,会出现溢出,所以子元素还需要设置
3. 子元素设置定宽使所有子元素宽度加起来100%,可以保证不会让后边的元素换行
4. 设置子元素overflow:auto,防止溢出,这时会出现一个不对齐问题,原因是默认的vertical-align是baseline,需要改成top|bottom|middle
5. 当然,同行并列块还可以用flex和table进行布局,但是这个切记要注意兼容性,注意flex如果需要用到伪元素需要小心
6. table布局爬坑:父级display:table;且设置宽度width:100%;table-layout: fixed;使子元素局限于他们的宽度;子元素display:table-cell;overflow:auto;防止溢出;居中在子元素设置vertical-align:middle;注意如果有滚动条,会有所偏差;默认是baseline

    
    
    
    
    


    
inline-block demo
    

        
child1
        
child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2
    

    
设置同行多个并列块显示(使用inline-block)
    

        
设置父元素宽高,fontsize为0,解决空格问题
        
设置子元素的fontsize不为0,才可以显示,如果统一高度,就设置一个定高,宽度可以感觉要求用百分比,因为inline-block,如果字段过长,会出现溢出,所以子元素还需要设置
        
子元素设置定宽使所有子元素宽度加起来100%,可以保证不会让后边的元素换行
        
设置子元素overflow:auto,防止溢出,这时会出现一个不对齐问题,原因是默认的vertical-align是baseline,需要改成top|bottom|middle
    
    
当然,同行并列块还可以用flex和table进行布局,但是这个切记要注意兼容性,注意flex如果需要用到伪元素需要小心
    

        
child1
        
child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2
        
child3child3child3child3child3child3child3child3child3child3
    
    

    

        
child1
        
child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2child2
        
child3child3child3child3child3child3child3child3child3child3
    
    
table布局爬坑:父级display:table;且设置宽度width:100%;table-layout: fixed;使子元素局限于他们的宽度;子元素display:table-cell;overflow:auto;防止溢出;居中在子元素设置vertical-align:middle;注意如果有滚动条,会有所偏差;默认是baseline