[CSS]テキストを画像の下に回り込ませないようにするスタイルシート
Post on:2009年12月15日
sponsors
ちょっとしたトリックを使用して、テキストを画像の下に回り込ませないようにするスタイルシートをNO Margin No Errorから紹介します。
Float an image without text wrapping under it.
demo
HTMLは、img要素とp要素をdiv要素で包んでいるだけです。
HTML
|
1 2 3 4 5 6 |
<textarea name="code" class="html" cols="60" rows="5"> <div class="content"> <img src="thumbnail.jpg" width="50" height="50" alt="Thumb!" /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ligula arcu, luctus nec elementum quis, condimentum a lectus. Suspendisse potenti. Proin neque diam, dictum ac elementum scelerisque, aliquet eget diam....</p> </div> </textarea> |
CSSは、floatを使用せず実装しています。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<textarea name="code" class="css" cols="60" rows="5"> .content { padding: 0 0 0 75px; /* 75px being the width of the thumbnail + how much space you want to put between it and your text */ position: relative; /* So the thumbnail is relative to this */ } .content img { left: 0; position: absolute; top: 0; } </textarea> |
実装のイメージは下記のようになります。
黄色の箇所はdiv要素に設定したpaddingで、そこに画像を配置しています。
sponsors
