10

你如何让文本环绕div如果您希望 div 在容器底部，

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

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

我正在尝试创建这个：

4

2 回答 2

14

你只需要处理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 上的本主题中找到更多信息。

于 2013-07-09T21:01:58.230 回答
0

position: absolute;将摆脱鬼元素空间

于 2021-01-18T23:30:43.440 回答