圣杯布局是一种三列布局,两边定宽,中间自适应布局:
STEP1:Create dom struction
<div id="header"></div>
<div id="container"> <div id="center" class="column"></div> <div id="left" class="column"></div> <div id="right" class="column"></div>
</div>
<div id="footer"></div>
STEP 2: Create the frame and pad the container with the width we want our left and right columns to occupy
#container { padding-left: 200px; /* LC width */ padding-right: 150px; /* RC width */ }
STEP 3: Give the colums to add apropritate width and float them to get them inline
#container .column { float: left; } #center { width: 100%; } #left { width: 200px; /* LC width */ } #right { width: 150px; /* RC width */ } #footer { clear: both; }
STEP 4:Get the left colum to line up with the pading-left on the container
Stetp 4.1:we`ll put it all the way across the center colums with a 100% negative margin
#left { width: 200px; /* LC width */ margin-left: -100%; }
Stetp 4.2:we`ll use relative postioning with an right offset the width of the left colum
#container .columns { float: left; position: relative; } #left { width: 200px; /* LC width */ margin-left: -100%; right: 200px; /* LC width */ }
STEP 5:Get the right colum to line up with the pading-right on the container
#right { width: 150px; /* RC width */ margin-right: -150px; /* RC width */ }
STEP 6:Design defensively , Seting the min-widh on the body keeps our colums in place when the browser window is resized
body { min-width: 550px; /* 2x LC width + RC width */ }
here , the simply he holy grail mode is finished ,but the layout offends even my aesthetic sensibilites , so we need whitespace , and Pading will be added to the colums
STEP 1:Pading is added the left column ,Keep the full width at 200px
#left { width: 180px; /* LC fullwidth - padding */ padding: 10 10px; right: 200px; /* LC fullwidth */ margin-left: -100%; }
STEP 2:Pading is added to the center padding
Add padding at conter column
#center { padding: 10px 20px; /* CC padding */ width: 100%; }
drawback1:padding plus a width of 100% cause the center column to expand beyond the non-padding width of the container ,
solution:we need increase the padding-right of the container ,This ensures that the center column is only as large as we expect it to be
#container { padding-left: 200px; /* LC fullwidth */ padding-right: 190px; /* RC fullwidth + CC padding */ }
drawback2:the left column do`t pull into the place
solution:we will pull the left column into place , then ,we will use relative position with an right offset the width of the left colum plusing double padding (40px)
#left { width: 180px; /* LC width */ padding: 0 10px; /* LC padding */ right: 240px; /* LC fullwidth + CC padding */ margin-left: -100%; }
note:why is the double padding , as following ;
drawback3: the right column do`t pull into the place
solution:as following
#right { width: 130px; /* RC width */ padding: 0 10px; /* RC padding */ margin-right: -190px; /* RC fullwidth + CC padding */ }
here,we finnished improving the aesthetic feeling ,the whole code
body { min-width: 630px; /* 2x (LC fullwidth + CC padding) + RC fullwidth */ } #container { padding-left: 200px; /* LC fullwidth */ padding-right: 190px; /* RC fullwidth + CC padding */ } #container .column { position: relative; float: left; } #center { padding: 10px 20px; /* CC padding */ width: 100%; } #left { width: 180px; /* LC width */ padding: 0 10px; /* LC padding */ right: 240px; /* LC fullwidth + CC padding */ margin-left: -100%; } #right { width: 130px; /* RC width */ padding: 0 10px; /* RC padding */ margin-right: -190px; /* RC fullwidth + CC padding */ }
参考资料:http://alistapart.com/article/holygrail