圣杯布局和双飞翼布局差别

2017-06-07  本文已影响0人  雨棚

主要在于解决中间内容没有自动换行问题
1、圣杯的解决方式:在bd设置左右padding,然后sub和extra设置relative,按照自身宽度相对偏移

<div id="bd">         
    <div class="main"></div>     
    <div class="sub"></div>        
    <div class="extra"></div>  
</div>

2、双飞翼布局:
main的宽度设置为100%,main-content设置左右margin,为sub和extra留出空间

<div id="main" class="column">
    <div id="main-content">#main</div>
</div>
<div class="sub"></div>    
<div class="extra"></div>
上一篇下一篇

猜你喜欢

热点阅读