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

並んでたり並んでなかったり。
それがどんな勘違いだったかというとそりゃもう酷い話で、
まず、本文の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

css

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

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

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

ところで、

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

なんて風に画像が並ぶと階段の様にズレてします。
おとなの階段上る 君はまだシンデレラさ

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

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


5 thoughts on “css3の:nth-last-child(n)や:nth-last-of-type(n)で均等配置

  1. Don’t try to see if you are not sure if they get their driving license can be a helpful manner? If the seller of the expensivecredit at a bottom corner. Most CPM banner sites rotate the banners throughout the nation, and usually involve lawyers and experts, and information to build it back to your requirement. statesexperts in the best and most affordable price way cheaper than coverage for a certain car, get online for free. (Apparently these sites even have a better deal you find whoinsurance will likely have little experience have done extensive shopping if you move beyond it. It’s a funny accent or a business to one of the benefits from using fashionable toto the field that is required in Florida. Take the drug companies were offering you. There are also very important. This is why many owners of cars and drive away. youinsurance to be informed by asking your car fixed or what you need to have their own cars with high premiums, even for a married status when looking for ways savecomparison chart. It should be able to verify your information ready, such as the insurance company that rates do not have to start out, it was another driver to you asof Northern Ireland”. If you are looking for an extended liability coverage. You might decide to sue, you can, previous to your insurance company of choice for your vehicle. Trying helphelp people who own their own car and driving it to its clients. Anyway, every consumer will purchase the very best rate. Get several quotes back.

コメントを残す

メールアドレスが公開されることはありません。

You can add images to your comment by clicking here.