table-call布局

学习了旭哥的文章总结

等分

  


  

    
1
    
2
    
3
    
4
    
5
    
6
  

效果

等高布局

  


  

    
对于不支持display:table-cell属性的IE6/7浏览器，又当如何解决呢？
      我们可以使用“补差等高法”，就是一个一个很大的margin-bottom负值配上一个同样大小的padding-bottom值，本例中为了实例需要，margin-bottom值就百来像素。显然，由于两者原理不同，难免需要用到hack，所以demo完整CSS代码如下：
    
    
对于不支持display:table-cell属性的IE6/7浏览器，又当如何解决呢？
    
对于不支持display:table-cell属性的IE6/7浏览器，又当如何解决呢？
  

效果

多行文字居中

  


  

    

      假如我现在有一个div，高度固定，里面有一段文本，差不多跟上面的第二个差不多，但是不知道到底有多少行。如果用第二种方法，并且文本超过了一行，那肯定超出父元素了，如图
    
  

左右布局

  


  

    
    

      
大美女一枚 来自上海
      
签名：想找个保鲜盒把你给我的那些感动都装起来。当你让我伤心的时候就拿出来回味一下。
      

        微博：坐在办公室，只听轰隆隆几声巨响，晴天也能打雷吗？原来街对面的芭莎咖啡厅被炸成了两截。这定点爆破也太失败了，也不清下场，把路过的汽车震得灰头土脸，愣在路中央不知如何是好。其次，房子只炸了一半，另一半屹立不倒，是乍药太水还是房子质量太好？
      
    
  

注意：设置display: table-cell;后消除BFC同时，不会像inline-block和absolute效果一样

图片居中

效果