正、負のマージンパディングマルチコラムレイアウト輪郭（RPM）

エディタ：負でCSSの賢い利用（http://www.webhek.com/post/2345qwerqwer.html）

コードから：  https://codepen.io/Chokcoco/pen/ZgrmVy

CSSのスキルは、長い時間のために存在するように見えるが、聞いて、自分の欠如は、実際にカエルである。私は以前、JS、恥ずかしいああを達成するために使用覚えています。

 

<！ - <H2>パディング+ +オーバーフローマージン、マルチカラム高い効果、良好な相溶性</ H2> - > 
< H2 > </ H2 > 
< DIV クラス= "G-padmar" > 
    < DIV クラス= "G-左" > 
        レイアウトコンテンツ左< BR /> 
    </ DIV > 
    < DIV クラス= "G-右" > 
        右レイアウトコンテンツ< BR /> 
        右レイアウト含量< BR /> 
        右レイアウトコンテンツを< BR /> 
        右のレイアウトのコンテンツ<BR /> 
    </DIV > 
</ DIV >

 

H2 { 
  テキスト整列：センター。
  行の高さ：60PX ; 
  高さ：60PX ; 
  フォントサイズ：20ピクセル ; 
  背景：＃00bcd4。
  色：#FFF ;
}

.G-容器 { 
  行の高さ：2。
  色：#FFF ;
}

.G-padmar { 
  位置：相対。
  オーバーフロー：隠されました ;
} 
.G-padmar .G-左 { 
  フロート：左 ; 
  幅：200pxの。
  背景：＃4caf50。
  パディング下：9999px ; 
  マージン下：-9999px ;
} 
.G-padmar .G右 { 
  幅：100％ 。
  margin-left：200pxの。
  背景：＃99afe0。
  パディング下：9999px ; 
  マージン下：-9999px ;
}