圣杯(圣杯有两种定位)和淘宝双飞翼

圣杯模型:
圣杯模型的核心在于父元素加padding。通过margin-left或者margin-right以及positive:relative定位左右两边元素;
以下左右元素的定位两种写法,均写在注释里面





    
    



    
    
2222222222222222222222222222222222 2222222222222 222222222222222 222222 2222222222222222222222222222222222222222 222222 222222222222222 222222222222222222222222222222222222222222 2222222222 222222222222222 222222
111111111111111111111111111111111 11111111111111222222222222222222222222222222 22222222222222222 222222222222222 222222 2222222222222222222222222222222222222222222222 222222222222222 2222222222222222222222222222222222222222222222222222 222222222222222 222222

淘宝双飞翼模型在于:给最先加载的main元素外面加一个包裹元素,
里面的子元素加上左右元素相对应的margin-left和margin-right;
再移动左右元素位置:





    
    无标题文档
    



    
#main
2222222222
111111111

你可能感兴趣的:(圣杯(圣杯有两种定位)和淘宝双飞翼)