乱雑モックアップ   らんざつ[乱雑] （名・形動）[文]ナリ 入り乱れていること。乱れていて秩序がないこと。また、そのさま。

ひとつ前の記事中に使った画像のサイズを勘違いして作成してしまい、テーマによっては段落ちが発生してた。

それがどんな勘違いだったかというとそりゃもう酷い話で、
まず、本文のwidthが480pxの所へ画像を2枚横並びで入れようとした。
その時画像のmarginを10pxとして考えて、横幅235pxでサムネイルを作った(235px*2(画像2枚)+10px(margin)=480px)。

けれども実際は両方の画像に右marginがつく為、本当のところmarginは2倍。
さらに画像には1pxのborderがついてたので1画像につき+2px、合わせて4px。
もう全然無理。

そこでサムネイルを小さく作り直せばいいのに、先日のie-css3.jsを思い出してE:nth-last-child(n)を使って2個目(最後)の画像のmarginを消してしまおう!となんか良い事を閃いた気になる。

そしてE:nth-last-child(n)とE:nth-last-of-type(n)の練習をしてから、いざ乱雑モックアップのcssをよく見てみると画像周りのmarginは10pxじゃなくて1emだった。

6pxしか余裕がないところに1emもmarginがあったら右側のmarginを削除しても段落ちするし、marginを5pxくらいにすると狭すぎるしで、結局今回はサムネイルのサイズを変更するのが一番簡単な修正方法でした。

前置きが長くなったけど、:nth-last-child(n)や:nth-last-of-type(n)の均等配置

乱雑モックアップ｜nth-last-childなどで均等配置テスト
html

<h1>E:nth-last-child(n)</h1>
<div id="content" class="lastchild">
  <div class="main">メイン画像</div>
  <div class="sub">
    <p>サブコンテンツ<br />
      サブコンテンツ<br />
      サブコンテンツ</p>
  </div>
  <div class="sub">
    <p>サブコンテンツ<br />
      サブコンテンツ<br />
      サブコンテンツ</p>
  </div>
  <div class="sub">
    <p>サブコンテンツ<br />
      サブコンテンツ<br />
      サブコンテンツ</p>
  </div>
</div>

css

body {
  font-size:80%;
}

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{
  content:"";
  display:block;
  clear:both;
}

/* ここでmargin0 */
.lastchild .sub:nth-last-child(1){
margin-right:0;
}

以前書いたこれ -> 横並びにしたリストを（手動だけど）簡単に均等配置ぽく見せるは、marginを左にとる必要があって今回はダメで。
marginを右にとる方法を使うにしても今回は親要素が一個たりないからダメなはず(たぶん)。

こちらもあーだこーだやってます-> E:nth-last-child(n)とE:nth-last-of-type(n)で均等配置

それにしてもこんな使い方よりもっと別な何かで協力に威力を発揮するんじゃないだろうかって思うんだけどその何かが思いつかない。勿体無い。

ところで、

WordPressで画像を挿入する時に、[配置]で左を選ぶとimgのclassにalignleftが付与される(右ならalignright)。
そして、うちのcssだと

<p><img style="float:left"></p>
<p><img style="float:left"></p>
<p><img style="float:left"></p>

なんて風に画像が並ぶと階段の様にズレてします。

理由はたぶんpの中のimgのfloatが解除されずに、次のpの中のimgがfloatで回り込んでくるから高さがおかしくなっちゃうんだと思ってるんだけど、本当のところどうなんだろう?

原因を探すために問題を再現できるシンプルなhtmlを作って試してるんだけどmarginで階段を作ることが出来ない。
paddingだと簡単に階段になるのに。