1

右下に配置された画像の周りにテキストを浮かせる方法を探しています。

ここで私の動作していないバージョン http://jsfiddle.net/xaqyb/

HTML

<div id="box">
<img width="120" src="http://www.ordnung-statt-chaos.de/wp-content/themes/thesis/rotator/sample-4.jpg" />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   
</div>

CSS

#box { 
    width: 250px; 
    min-height: 150px; 
    position: relative; 
    border: 1px solid #ccc; 
   background: #f7f7f7; 
    padding: 10px; 
}

#box img {
    display: block; 
    float: right; 
}

何か案は？

4

1 に答える 1

3

たとえば、span を p タグに使用してから、img を span に入れることができます。

<div id="wrapper">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,<span>
<img width="100px" src="http://www.ordnung-statt-chaos.de/wp-content/themes/thesis/rotator/sample-4.jpg" />
</span> no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

このCSSスタイルは

#wrapper { width: 250px; min-height: 150px; border: 1px solid #ccc;background:#f7f7f7; padding: 10px }
#wrapper img { display: block}
#wrapper span{display: block;float: right;}
于 2012-10-08T11:20:10.440 に答える