CSS Holy Grail Layout

• Principle: Use float float and positioning, negative border, to achieve fixed on both sides, adaptive three-column layout in the middle (Taobao layout)

• rendering

  

/ / content box<div class="container">
        <div class="middle"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <style>// .container{ height: auto; overflow: hidden; padding: 0 200px; }. Middle {width: 100%; height: 200px; } .left{ width: 200px; height: 200px; float: left; position: relative; left: -200px; margin-left: -100%; }. Right {width: 200px; height: 200px; float: left; position: relative; right: -200px; margin-left: -200px; / / important}</style>
Copy the code

• The adaptive part in the middle must be written first!