布局效果類似聖杯,所以叫聖杯布局。就是三行三列布局
核心:主要就是實現中間主體部分中的
左右定寬 + 中間自適應
的布局效果/*左右定寬*/
.left,
.right
.left
.center
.right
class
,="left"
>
div>
class
="right"
>
div>
class
="center"
>
div>
/*改變順序,需要把center放到最後*/注意:可能對搜尋引擎不友好,因為搜尋引擎是按照順序抓取資料的
對主體外套乙個父元素,為父元素設定高度,再設定左右內邊距,大小同兩邊定寬的寬度相等。對left
center
,right
都設定float: left;
,把center的寬度設定為100%(也就是父元素的相同寬度)。再用
margin-left
和設定position: relative;
後可使用的left
和right
把左右兩個定寬元素移動到理想位置。記得對定寬元素設定寬度
DIV CSS三行兩列經典布局
師阿捷2004年發布在 網頁設計師 上的,乙個非常經典的布局,在ie mozilla和opera瀏覽器中均可以實現居中和高度自適應。完整 如下 在阿捷的 基礎上作了部分修改 title seo參考 xhtml之經典三行兩列布局 title style type text css body heade...
探索CSS實現三行三列等高布局
2006 02 13 07 47 07 author greengnn font size large medium all 第一步 建立乙個結構 xhtml開始於header,footer,and container css先定義container,給將要加入的sideleft,和siderigh...
三列自適應布局 聖杯布局
html結構type text css 設定左右內邊距 container style class container div 複製 在container中新增三列type text css container div center left right style class container ...