フローティング画像と回り込み引用要素(blockquote)表示テスト

このページでは、左寄せ画像(または、右寄せ)を使用した場合の 引用要素(blockquote)が、適切に表示されるか確認するためのテストケースです。

サポートバージョン Raindrops 1.346以降

DSC_0013 - コピー

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Using rd-float-wrapper class

DSC_0013 - コピー

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Clear Float

DSC_0013 - コピー

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Note:

  • blockquote要素に、clear を指定してもフロートはクリアできますが、フロート要素への潜り込みが発生するので、画像との間のマージンが取れません。
  • 回り込んだblockquote要素は、296px以下の幅の場合、フロートを解除します。

コメントは受け付けていません。