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) }この部分は文章を書く
この部分は文章を書く
この部分は文章を書く(・・以下繰り返し)
【表示見本】
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
padding:10px を追加
#divstyle(float:left;padding:10px;){#image_thumbnail(config_03.png)}この部分は文章を書く・・・
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
margin:0 10px 0 0 を追加
4パラメータは上から開始、時計回り
↑→↓←
上右下左
#divstyle(float:left;margin:0 10px 0 0;){#image_thumbnail(config_03.png)}この部分は文章を書く・・・
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
画像のあとに全角スペースを入れると続く文章が画像とくっつかなくていいので
見やすくなるようだ。padding:10px とか入れてもいいんだけど
画像全体に枠ができちゃうのでこちらのほうが楽。
※IEだとスペースが無視されるらしい。別の方法を模索したほうがいいかもしれない
ついでに右寄せ
#divstyle(float:right;){ 画像}
この部分は文章を書くこの部分は文章を書くこの部分は文章を書くこの部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
・・なんかよさげ。
事故る例
文章の途中でインラインを抜けるにはどうすればいい?
いや次の画像が来るからいいのか?
【表示見本・失敗例】
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
うわーなんだこりゃ
文字数が足りないと上の様になってしまう。
【表示見本・修正】
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
ココから回り込み解除
この部分は文章を書く
この部分は文章を書く
この部分は文章を書く
改行部分の前に
#divstyle(clear:left){}
を宣言すると回り込みが解除される。
とりあえずwikiのマニュアルには書いてないので
CSSのマニュアルを検索する。とりあえずココをメモ
- 最終更新:2011-11-16 17:55:52