0

テキストdivをその兄弟画像divの周りにラップしたいと思います。画像の周りにテキストを折り返す標準的な方法と混同しないでください。ただし、2つの別々のdivと混同しないでください。例を以下に示します。

<div style="width:1000px;">
    <div>
        <img src="some url" />
    </div>
    <div>
        <p>Some very long text here</p>
    </div>
</div>

テキストが画像を包み込んでいるように見せたいです。

これは可能ですか？

4

2 に答える 2

3

画像を含むdivを左または右にフロートさせます。

<div style="width:1000px;">
    <div style="float:left">
        <img src="some url" />
    </div>
    <div>
        <p>Some very long text here</p>
    </div>
</div>

jsFiddleの例

于 2013-03-14T20:00:28.083 に答える
0

同様の方法を次に示します。

http://jsfiddle.net/Sux2Z/

<div>
    <img src="http://cdn.memegenerator.net/images/80x80/1167066.jpg" />
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus.
</div>

.div {width:400px;}
img {
    margin:0 10px 10px 0;
    float:left;
}
于 2013-03-14T20:05:14.020 に答える