E:nth-last-child(n)

E:nth-last-of-type(n)

-margin

今回メインのcss

@charset "utf-8";



/* 別cssのリセット ------------------------- */

body {

  font-size:80%;

}



h1 {

  font-size:150%;

  margin:1em 0;

}



h2 {

  font-size:120%;

  margin:1em 0;

}

li,ul,p {

  margin:0;

  padding:0;

}

/* /別cssのリセット ------------------------- */



p {

  padding:10px;

  margin:0;

}



#content {

  width:380px;

  padding:10px 10px 0 10px;

  border:1px solid SteelBlue;

}



.main {

  width:380px;

  text-align:center;

  line-height:234px;

  color:black;

  background:LightSkyBlue;

  margin-bottom:10px;

  height:234px;

}



.sub {

  width:120px;

  margin:0 10px 10px 0;

  background:aliceBlue;

  float:left;

}



#content:after,

.subbox:after{

  content:"";

  display:block;

  clear:both;

}



/* ここでmarginを消してる*/

.lastchild .sub:nth-last-child(1),

.oftype .sub:nth-last-child(1) {

margin-right:0;

}



/* マイナスのmargin */

.subbox {

  margin-right:-10px;

}

このページは乱雑モックアップのサンプルページです。

• css3の:nth-last-child(n)や:nth-last-of-type(n)で均等配置 « 乱雑モックアップ