Question

我想在其兄弟图像div周围包装一个文本div。不要与在图像周围包装文本的标准方法相混淆，而是使用两个单独的div。示例如下：

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

我希望看起来文字正在环绕图像。

这可能吗？

Answer 1

将包含图像的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 example

Answer 2

这是一种类似的方法：

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;
}

如何围绕兄弟div包装div

2 个答案: