Html 环绕 div 的文本

Text wrapping around a div

提问by Bucthree

How do you get the text to wrap around a divif you want the div on the bottom of a container?

div如果您想要容器底部的 div，您如何让文本环绕 a ？

I can figure out how to get the text to wrap around the divas long as its on top, but if I try and push it to the bottom of the page, the text either doesn't continue across the top of the divor the divgets pushed in front of the text.

我可以弄清楚如何让文本环绕div在顶部，但如果我尝试将它推到页面底部，文本要么不会继续穿过顶部，div要么div被推在文字前面。

Currently, I have a container divand then the darkened box is another div within that div.

目前，我有一个容器div，然后变暗的框是该 div 中的另一个 div。

I'm trying to create this:

我正在尝试创建这个：

回答by Guilherme Oderdenge

You just need to work with floatproperty.

你只需要处理float财产。

HTML:

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:

CSS：

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

Play with this on jsFiddle.

在 jsFiddle 上玩这个。

---

---

Update

更新

With pure CSS, the most that you will get is manually spacing the sides of image with absolute positioning.

使用纯 CSS，您将获得的最多的是使用绝对定位手动间隔图像的边。

The HTML:

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

The CSS:

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

Play with this on jsFiddle.

在 jsFiddle 上玩这个。

More information

更多信息

You can find more information in this topic, on StackOverflow.

您可以在 StackOverflow 上的本主题中找到更多信息。