文本环绕div

Question

如何让文本环绕在底部的div周围？

如果您想要将div放置在页面底部，我可以帮您解决如何让文本环绕div的问题。

如果div在顶部，我可以找到让文本环绕其周围的方法，但是如果我尝试将其推到页面底部，则文本要么不会在div顶部继续延伸，要么div会被推到文本的前面。

目前，我有一个容器div和一个位于该

中的阴影框div。

我正在尝试创建这个效果：

- Bucthree

Answer 1

你只需要使用 float 属性。

HTML：

<div>
    <img src="http://www.igta5.com/images/trailer-2-gtav-logo.jpg" alt="GTA V" />
    <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
</div>

CSS：

div img {
    width: 240px;
    float: right;
    padding: 25px;
}

在 jsFiddle 上试玩。

---

更新

使用纯 CSS，您最多只能手动使用绝对定位来调整图像的两侧间距。

HTML：

<div class="left">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="right">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<img src="http://www.igta5.com/images/trailer-2-gtav-logo.jpg" style="width: 240px; height: 140px;">

CSS：

img {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -125px;
    margin-top: 60px;
}

.left, .right {
    width: 49%;
}

.left {
    float: left;
}
.right  {
    float: right;
}

.left:before, .right:before {
    content: "";
    width: 125px;
    height: 200px;
}

.left:before {
    float: right;
}

.right:before {
    float: left;
} 

在 jsFiddle 上试玩一下。

更多信息

你可以在 StackOverflow 上这个话题中找到更多信息。

- Guilherme Oderdenge

---

这是我目前所拥有的代码。我现在遇到的问题是，如果我使用 margin 或 padding 将 div 推到容器底部，那么文本就不会跨越上面的空白区域换行了。 - Bucthree

感谢使用GTA V徽标 :) - Sasino

对于那些在原始答案上遇到问题的人...请确保浮动元素在前，包装元素紧随其后。我花了太多时间才弄清楚这一点。 - Rick

Answer 2

position: absolute; 可以消除幽灵元素空间

- ElizabethPermina1947140