聖杯布局
就是左右兩邊的保持不變，中間的搜尋框因瀏覽器的大小改變而改變，
典型案例的如天貓頁面搜尋框，如圖
首先我們設定乙個父盒子包含三個小盒子
100px
，上下padding為0
，左右padding
為200px
.box.left
.right
.center
因此我們就需要給
margin
設定負值了，給
left
類設定
margin-left: -200px;類設定
margin-right: -200px;div在一行顯示了，
這樣會有乙個問題，當我們不停的減小瀏覽器的時候會發現最終中間的盒子的寬度為
因此需要給中間的盒子設定最小寬度，如給個
200px
min-width: 200px;200的時候，再繼續減小瀏覽器視窗，右邊的盒子又會到第二行，
解決這個問題我們就需要在父元素裡面也新增乙個最小寬度，比如也是200px。這樣就解決了所有問題。
min-width: 200px;
CSS聖杯布局
本文與之前 css雙飛翼布局 一文有些相似，在html結構上他們可以說是相同的。樣式主要表現為浮動 負邊距 定位。在 css雙飛翼布局 中，為了排開左右兩邊遮擋main元素的區域，是給main又新增了乙個子元素，用子元素來控制main所要顯示內容的寬度與位置，這是乙個不錯的方法，但從結構上來講，我們...
CSS 布局3 聖杯布局
聖杯布局是有 的工程師提出，巧妙的利用我們介紹過的定位技術 負邊距 相對定位 浮動 組合運用。輕鬆實現常見布局。我們在前面介紹過，使用浮動特性，實現三列布局，但是使用div布局，有乙個問題，那就是內容區，在左邊區和右邊區之後渲染。下面我們使用聖杯布局的思路，實現乙個內容區渲染在前的三列布局。1 負邊...
CSS經典布局 聖杯布局
廢話不多說，先上全部的 body container container column center left right footer ie6 fix html left 首先就是建立大體的布局，header footer container 給 container 乙個預設的padding le...