wiki構文テストページ

記事内での画像とテキストの回り込みをテスト


画像と文章を並べると縦にズラ~っと長くなっちゃうし
かと言ってテープル組むと編集が大変になっちゃうので困っていた。

wiki構文ではDIVのインラインを使うといいかも?


コピペ用完成フォーマット

#divstyle(float:left;margin:0 10px 0 0;){#image_thumbnail(config_03.png)}
この部分は文章を書く
文章羅列
改行OK
回りこみ解除 #divstyle(clear:left){}

divstyleを使う


以下実験【構文例】
#divstyle(float:left;){#image_thumbnail(config_03.png) }
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く(・・以下繰り返し)
【表示見本】

config_03.png 
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く


padding:10px を追加
#divstyle(float:left;padding:10px;){#image_thumbnail(config_03.png)}
この部分は文章を書く・・・

config_03.png
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く


margin:0 10px 0 0 を追加
4パラメータは上から開始、時計回り
↑→↓←
上右下左
#divstyle(float:left;margin:0 10px 0 0;){#image_thumbnail(config_03.png)}
この部分は文章を書く・・・

config_03.png
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く


画像のあとに全角スペースを入れると続く文章が画像とくっつかなくていいので
見やすくなるようだ。padding:10px とか入れてもいいんだけど
画像全体に枠ができちゃうのでこちらのほうが楽。

※IEだとスペースが無視されるらしい。別の方法を模索したほうがいいかもしれない



ついでに右寄せ
#divstyle(float:right;){ 画像}
 config_03.png

この部分は文章を書くこの部分は文章を書くこの部分は文章を書くこの部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く


・・なんかよさげ。

事故る例


文章の途中でインラインを抜けるにはどうすればいい?
いや次の画像が来るからいいのか?

【表示見本・失敗例】

config_03.png 
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
config_03.png 
うわーなんだこりゃ




文字数が足りないと上の様になってしまう。

【表示見本・修正】

config_03.png 
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
ココから回り込み解除
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く

改行部分の前に
 #divstyle(clear:left){}
を宣言すると回り込みが解除される。

とりあえずwikiのマニュアルには書いてないので
CSSのマニュアルを検索する。とりあえずココをメモ

  • 最終更新:2011-11-16 17:55:52

このWIKIを編集するにはパスワード入力が必要です

認証パスワード