Html 让图像在内容左右浮动，而不占用垂直空间

我正在为wordpress主题添加背景图像。我在body标签下面添加了以下代码：

<!-- Custom floating background  -->
<img id="left-girl" src="/wp-content/uploads/2014/03/left-girl.png">
<img id="right-girl" src="/wp-content/uploads/2014/03/right-girl.png">

这就是我得到的结果：

---

如何实现这一点？

您可以使用以下结构：

<div id="wrapper">
    <div class="left"><img src="/wp-content/uploads/2014/03/left-girl.png" /></div>
    <div class="main">
    </div>
    <div class="right"><img src="/wp-content/uploads/2014/03/right-girl.png" /></div>
</div>

---

在图像周围环绕文本很容易。只需使用左/右浮动，并将所需尺寸添加到图像中（宽度和高度）

请看我为你制作的小提琴，如果它能回答你的问题，请告诉我

HTML

---

HTML是什么样子的？哇！忘记标记为代码。为什么不为此使用

背景图像

？请尝试定位

绝对

@davidtunell这是因为您的网页可能有一些交叉样式（样式相互覆盖），请尝试使用标记

！重要信息

对于任何情况下都要应用的样式，使用“清除”都应该有效，以下是小提琴作为示例：还要注意，中心元素的宽度应足够小，以适合中心空间，否则将在浮动元素下方渲染。

<div id="wrapper">
    <div class="left"><img src="/wp-content/uploads/2014/03/left-girl.png" /></div>
    <div class="main">
    </div>
    <div class="right"><img src="/wp-content/uploads/2014/03/right-girl.png" /></div>
</div>

#wrapper {padding-left:120px; padding-right:120px;} /*padding should be width of respective images plus what padding you want*/
#wrapper:after {content:''; display:block; clear:both; height:0; overflow:hidden;}
#wrapper > div {float:left;}
#wrapper > .left {width:100px; /*width of image*/ margin-left:-120px; /*minus amount of left padding*/}
#wrapper > .right {float:right; width:100px; /*width of image*/ margin-right:-120px; /*minus amount of right padding*/}
#wrapper > .main {width:100%;}

<img src="http://placehold.it/200x300" class="left">
<div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus esse     laudantium         fugit voluptatibus quas cumque vero perspiciatis minima quae voluptatem eos illo aperiam alias odit voluptate asperiores natus cupiditate magnam.
</div>
<img src="http://placehold.it/200x300" class="right">

.left {
    width: 200px;
    height: 300px;
    float: left;
}

.text {
    width: 200px;
    float: left;
}
.right {
    width: 200px;
    height: 300px;
    float: right;
}