那里能夠稍作改良，右側(cè)欄間接設(shè)定 overflow:auto;zoom:1 或者許 overflow:hidden;zoom:1 的款式。使得多層嵌套的自順應(yīng)柵格化格局明晰明了。此外也會(huì)具有一些潛正在的危險(xiǎn)：假如右側(cè)欄蘊(yùn)含少量劇本資源，能夠會(huì)反應(yīng)以至堵塞整個(gè)頁(yè)面的載入（假如取舍運(yùn)用 iframe或者許 ajax 來(lái)加載就另當(dāng)別論）。
點(diǎn)此檢查該代碼示例：negative_margin_layout.html
</div>
  <div class="aside">右側(cè)欄</div>
  </div>
    </div>
      <div class="left">左側(cè)欄</div>
      </div>
        <div class="main">主體全體</div>
      <div class="g2">
    <div class="g1">
  <div class="section">
<div class="wrap">
.aside{float:right;width:300px;position:relative;background:lime;}
.left{float:left;width:200px;position:relative;background:orange;}
.main{margin-left:210px;float:none;width:auto;position:static;overflow:auto;background:red;}
.g2{float:right;margin-left:-40em;width:100%;}
.g1{margin-right:310px;float:none;width:auto;position:static;}
.section{float:left;margin-right:-40em;width:100%;}
.wrap{}

思忖到頁(yè)面構(gòu)造的簡(jiǎn)單水平和容積大小，重型站點(diǎn)的格局計(jì)劃，集體偏偏向于采納諸如負(fù)邊距等等自順應(yīng)格局。
點(diǎn)此檢查該代碼示例：two_column_layout.html
</div>
  <div class="right">右側(cè)欄</div>
  <div class="left">左側(cè)欄</div>
<div class="wrap">
.right{ display:table-cell;_display:block;zoom:1;background:lime;}
.left{float:left;background:orange;}
.wrap{background:gray;}

對(duì)準(zhǔn)于這種場(chǎng)景，能夠采納兩欄均浮動(dòng)的辦法。細(xì)致參考自順應(yīng)柵格化格局代碼示例：grid_layout.html
3、自順應(yīng)柵格化格局
固然完成上要比其余計(jì)劃更為簡(jiǎn)單，需求嵌套多層標(biāo)簽，正在定然水平上有失 HTML 文檔的簡(jiǎn)明性。以Amazon首頁(yè)來(lái)說(shuō)，其自順應(yīng)格局采納的是與Object-oriented CSS相相似的計(jì)劃：
2、三欄自順應(yīng)格局
因?yàn)镮E6并沒(méi)有支撐 display:table-cell 屬性，必需經(jīng)過(guò) CSS hack 來(lái)補(bǔ)償某個(gè)缺點(diǎn)。假如使用到相似表格的頁(yè)面排字，這種辦法卓有成效。這種格局的益處正在于，沒(méi)有管外框幅度如何變遷，主體全體總能自順應(yīng)。與其相比，正在全部頁(yè)面格局中，提議運(yùn)用 Object-oriented CSS 這種簡(jiǎn)明的、基于比重的柵格計(jì)劃。眼前口碑網(wǎng)的前者格局零碎正是使用了這種處理計(jì)劃，并有公用機(jī)器完成格局框架的主動(dòng)化生成。正在這張運(yùn)用 WebPageTest 對(duì)于 Amazon 首頁(yè)渲染進(jìn)程的某一時(shí)辰截圖中，能夠發(fā)覺(jué)內(nèi)外兩側(cè)的形式首先予以出現(xiàn)，而主體全體會(huì)形成定然工夫的空白。

。那里以 YUI 框架需要的柵格計(jì)劃為例來(lái)注明：
家喻戶(hù)曉，HTML文檔是次第解析的。但從頁(yè)面構(gòu)造下去說(shuō)，節(jié)點(diǎn)情理次第和聽(tīng)覺(jué)論理次第沒(méi)有分歧，最要害的主體全體形式被排正在整個(gè)文檔的前面，主次散布沒(méi)有正當(dāng)，總感覺(jué)有一些可惜。那里就容易談?wù)劧嗌賯€(gè)本人碰到過(guò)的自順應(yīng)成績(jī)。
點(diǎn)此檢查該代碼示例：three_column_layout.html
</div>
  <div class="main">主體全體</div>
  <div class="right">右側(cè)欄</div>
  <div class="left">左側(cè)欄</div>
<div class="wrap">
.main{overflow:hidden;zoom:1;background:lime;}
.right{float:right;width:300px;background:orange;}
.left{float:left;width:250px;background:red;}
.wrap{background:gray;}

提到三欄自順應(yīng)格局，這該當(dāng)是最為根本的主頁(yè)排字方式了。
1、兩欄自順應(yīng)格局
    正在主頁(yè)全部的格局上，需求采納少量的自順應(yīng)，來(lái)滿意沒(méi)有同長(zhǎng)短數(shù)據(jù)、形式的正當(dāng)出現(xiàn)。完成原理能夠參考《Creating Liquid Layouts with Negative Margins》這篇作品。其要害點(diǎn)是，內(nèi)外兩欄均沒(méi)有定寬，右側(cè)欄條款單位沒(méi)有定。而眼前少量的網(wǎng)站正正在運(yùn)用 950px/960px 幅度的柵格零碎，流動(dòng)最小柵格單元的幅度，保障全體構(gòu)造的正當(dāng)、穩(wěn)固和分歧。因而這種計(jì)劃并沒(méi)有宜用來(lái)整站頁(yè)面框架的搭建。應(yīng)用負(fù)邊距能夠建立出很多簡(jiǎn)單的流體格局方式。參考 Object-oriented CSS 中使用到的格局計(jì)劃，則需求沿用兩層標(biāo)簽完成，兩欄中一欄浮動(dòng)，另一欄幅度自順應(yīng)：

正在實(shí)踐名目中，往往遇到如白色線框全體的兩欄自順應(yīng)成績(jī)。但一度主要的益處是，其各個(gè)區(qū)塊（左側(cè)欄、主體全體、右側(cè)欄）文檔構(gòu)造次第能夠隨便互換，而正在聽(tīng)覺(jué)出現(xiàn)上卻沒(méi)有任何差別。

本案例中，內(nèi)外側(cè)欄辨別浮動(dòng)，主體全體（兩頭欄）溢出躲藏。以此保障頁(yè)面沒(méi)有至于由于形式過(guò)多等緣由，招致堆疊、溢出、撐開(kāi)等毀壞全體聽(tīng)覺(jué)成效的狀況。假如能夠保障外部一切區(qū)塊自順應(yīng)，就只要要對(duì)于最外圍器皿設(shè)定幅度，顯示更為靈敏(義務(wù)編者：帝位庫(kù))
Object-oriented CSS 提出了一種構(gòu)造化的多欄自順應(yīng)格局，應(yīng)用柵格掌握器皿幅度，形式掌握器皿高低。