0

我阅读了以前的帖子并从绝对位置更改了我的 CSS 以使文本环绕。

我希望这个 div 位于右下角，并且文本可以在它周围移动。

但是，目前文本正在迫使 div 向下。

任何人都知道如何解决这个问题？

html:

<div id="top-image">
        image
    </div>

    <p>dummy text dummy text dummy text dummy text dummy text dummy text 
dummy text dummy text dummy text dummy text dummy text dummy text dummy text 
dummy text dummy text dummy text dummy text dummy text dummy text dummy text 
dummy text dummy text dummy text dummy text dummy text dummy text dummy text 
dummy text      <br><br>

dummy text dummy text dummy text dummy text dummy text dummy text dummy 
text dummy text dummy text dummy text dummy text dummy text dummy text dummy 
text dummy text dummy text dummy text dummy text dummy text dummy text dummy 
text dummy text dummy text dummy text dummy text dummy text dummy text dummy
text<p>


<div id="bottom-image">
    image
</div>

CSS：

#bottom{
float:left;
height:215px;
width:100%;
margin-top:10px;
margin-bottom:10px;
}

#top-image{
    background-color:#999;
    float:left;
    width:140px;
    height:110px;
    margin-right:10px;
    margin-bottom:10px;
    }

#bottom-image{
    background-color:#999;
    float:right;
    width:140px;
    height:110px;
    margin-left:10px;
    }

这是它目前的样子： 截屏

如您所见，文本将底部图像向下推到页脚中。

4

2 回答 2

2

由于 a<p>是块级元素，它总是会强制其他内容向下。如果将图像放在段落内，它会在右侧的段落内浮动。只需将其放在您希望它对齐的文本行的开头即可。

于 2013-04-15T13:42:46.733 回答
1

就这么简单：http ://codepen.io/anon/pen/qiIob

您需要将 float:left 添加到您的<img>并且不要将您的文本包装到 div 或 p 中。

于 2013-04-15T13:34:21.237 回答