杯レイアウト：2つのアンカー、中間の適応;
コード要素：
<divのクラス = " ボックス" > <divのクラス = " コンテンツ" > </ div> <divのクラス = " 左" >左</ div> <divのクラス = " 右" >右</ div> </ div>
レイアウトコード：
■は{
マージン：0PX自動;
幅：800ピクセル;
高さ：200pxの。
国境：1pxの固体赤。
パディング：0 200pxの。
}
コンテンツの幅が小さくなるにするためにパディング値に親ボックスを設定し、左右のサイド位置に残しました。
■は>のdiv {
フロート：左;
高さ：200pxの。
}
.content {
幅：100％;
背景色：antiquewhite
}
.LEFT {
幅：200pxの。
高さ：200pxの。
背景：cadetblue。
余白左：-100％;
位置：相対;
左：-200px;
}
。右 {
幅：200pxの。
背景：cadetblue。
margin-left：-200px;
位置：相対;
左：200pxの。
}
* /パディングを使用した後、親コンテナの幅を設定しませんので、内容領域の幅は、葉に十分な位置の両側には、小型で、メインの幅が小さくなるが、ので、私たちはまた必要、親コンテナのパディング領域を横断することはできません浮動カラムの周りの位置との相対位置を移動させます。/ *
フライングウィング：
コンテナの中間部の層を配置するには、そうした後、大型コンテナは、もはやパディング値を設定する必要があり、左と右の列ボックスは相対的なレイアウト、合理化されたコードに多くを設定する必要はありませんが、レイアウトを変更しないことは特に狭いですしないでください問題の混乱。
<divのクラス = " ボックス" > <divのクラス = " 続き" > <divのクラス = " センター" > 内容 </ div> </ div> <divのクラス = " 左" > 左 </ div> <divのクラス = " 右" > 右 </ div> </ div>
レイアウトコード：
■は{ 幅：800ピクセル。 高さ：400ピクセル; 国境：1pxの固体赤。 マージン：100pxに自動; } ■は > DIV { フロート：左; 高さ：400ピクセル; } .cont { 幅：100％。 } .center { 背景：赤。 マージン：0 200pxの。 高さ：400ピクセル; } .LEFT { 背景：青; 幅：200pxの。 マージン-left： - 100％。 } .RIGHT { 背景：ピンク。 幅：200pxの。 マージン -left： - 200pxの。 }
効果は、このように構成され、
