css - 如何将 div 包裹在兄弟 div 周围

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 示例

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