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

Question

我正致力于为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">

我试图让它们浮动到网站主要内容的左侧和右侧而不影响垂直空间。

这是我的CSS：

#left-girl {
float:left;
margin-left:5em;
}

#right-girl {
float:right;
margin-right:5em;
}

这是我得到的：

我怎样才能做到这一点？

Answer 1

您可以使用以下结构：

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

和css

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

Example

Answer 2

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

请查看我为您创建的这个小提琴，如果它回答您的问题，请告诉我。

http://jsfiddle.net/zQLzd/

HTML

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

CSS

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

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