アフィリエイト・WP

StingerPlus+画像を横並びで表示する。同じサイズに縮小して1行にピッタリ!

投稿日:2016-07-15 更新日:

「写真(画像)を同じ行に横に並べるにはどうすればいいんだろう?」

先日、こんな問題で悩みました。

CSSのdisplayやfloatを使えば簡単にできるだろうと思っていたら、これが全然うまくいかないのですよ、久々に壁にぶちあたりました。

どうやってもこんな感じで縦並びで表示されてしまいます

DSC_0485
DSC_0486
DSC_0488

CSSムズカシイ(/ω\)

いったんCSSから離れて別の方法を模索、結局 TABLEタグを使うことで解決しました。

先ほどの縦並びの画像が縮小してキレイに1行にぴったり収まりましたよ!スバラシイ!

DSC_0485 DSC_0486 DSC_0488

ソースはこんな感じになります。

ポイントは、StingerPlus+に装備されている「装飾なしテーブル」ボタンを押して、TABLEを囲んでいる点です。

1

こうすることで、セルを囲む罫線を消去してくれて、すっきりした表示になります。

このような機能がボタンではじめから提供されている点が、StingerPlus+が他のテーマより優れている点だと思います。

CSSで実現する方法もまだあきらめたわけではないので、もし上手くいったらこちらの記事でご紹介しますね♪

広告

-アフィリエイト・WP

Copyright© ムコの戯言帳 , 2017 All Rights Reserved Powered by AFFINGER4.