複数のブロックで流し込みってありですか

2012年9月29日 at 8:18

フロートのdivタグ(<div style="float:left">)の画像ブロックを作りました。

すると、その下の記事ブロックが、画像の右に表示されます。
さらに、その下に記事ブロックを置くと、それも右に表示されます。

そこで、<div style="clear:both">だけのブロックを作って2つに記事ブロックの間に配置すると、上の記事ブロックは画像の左に、下の方の記事ブロックは、画像の下に表示されます。

偶然の出来事がきっかけなんですが、流し込み機能のある画像ブロックを使わなくても、レイアウトを使わなくても、右に画像、左に記事を置くことができました。
さらに、右に画像2つ、左に記事を置くこともできました。

編集時には、縦に並びますが、編集を抜けると横に並ぶという問題はありますが、画像はいくらでも並べられるし、左には既存のどんなブロックも置けます。

これを積極的に使って問題がありますでしょうか?

大きな問題がなければ、その画像ブロックと、区切りブロックを公開します。

#一旦コードもアップしましたが、タグなのでうまく表示できませんでしたので編集して削除しました

タグ:

Re: 複数のブロックで流し込みってありですか

2012年9月29日 at 8:42
特に問題無いと思いますが、サイトのCSSに左右される部分が大きいと思います。
また、使い方やサイトによってはレイアウトが大幅に崩れる可能性もあると思うので、そこら辺注意が必要だと思います。
 

Re: 複数のブロックで流し込みってありですか

2012年9月29日 at 9:26
特に問題はないと思っていましたが、画像を1つ記事1つなら問題無いですが、画像2を置くと編集時に挙動がおかしいです。以下のタグによって、編集時に挿入されるタグが影響を受けるようです。

CSSのことよくわかっていないのですが、どうすればタグを完結させることができるでしょうか。

<!ーー画像ブロック1ーー>
<div style="float: left;">
<img src="xxx.jpg">
</div>
<!ーー画像ブロック2ーー>
<div style="float: left;">
<img src="xxx.jpg">
</div>
<!ーー記事ブロック1ーー>
<p>
</p>
<!ーー区切りブロックーー>
<div style="clear:both;"></div>
<!ーー記事ブロック2ーー>
<p>
</p>
 

Re: 複数のブロックで流し込みってありですか

2012年9月29日 at 14:59
おかしくなる症状は、添付の画像の通り、画面の下の方に、ぐるぐる回るアイコン?画像?が出てきます。このアイコン、何かの時(処理中かな?)に見たことがありますが。

そこで上記の構造ブロックで、2番めの画像を標準の画像ブロックに入れ替えてみると、見た目は同じですが問題がなくなりました。

両者のコードを比較してみたら、問題が怒らない=2番めを標準の画像ブロックにした場合、
以下のコードが余分にありました。

<script type="text/javascript">$(function() { ccm_doPageReindexing(); });</script>

これはなにをするコードなんでしょうか?
添付: 1111.png