女性向けサイト作りに圧倒的効果！

• 2014.10.6
• 隠された装飾機能

画像に文字が回り込む指定

回りこみ指定

アラアラ大変、こんなに回りこむだなんて。
予想もしていませんでしたわ、回り込み。使いドコロもちょっと難しい気がしますのよ。

アラアラ大変、こんなに回りこむだなんて。
予想もしていませんでしたわ、回り込み。使いドコロもちょっと難しい気がしますのよ。

r-flo:画像右　文字左の回り込み
l-flo:画像左　文字右の回り込み
f-clear:回りこみ解除

※f-clearはちょっと意図した動きにならなかったので、別のとこで定義されてるっぽい、clearfixというクラスを指定してみました。このクラスを指定したdivで囲むと、divを閉じた瞬間に回りこみ解除されます。

<div class="clearfix">
<img src="http://tcd014an.sukkiris.com/wp-content/uploads/2014/10/021-e1412587036283.jpg" alt="021" width="150" height="133" class="r-flo size-full wp-image-136" />
アラアラ大変、こんなに回りこむだなんて。
予想もしていませんでしたわ、回り込み。使いドコロもちょっと難しい気がしますのよ。
</div>
<div class="clearfix">
<img src="http://tcd014an.sukkiris.com/wp-content/uploads/2014/10/021-e1412587036283.jpg" alt="021" width="150" height="133" class="l-flo size-full wp-image-136" />
アラアラ大変、こんなに回りこむだなんて。
予想もしていませんでしたわ、回り込み。使いドコロもちょっと難しい気がしますのよ。
</div>

どうだろ…商品PRとかに使えるかな。

• Tweet
•