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

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

我试图让它们在不影响垂直空间的情况下 float 到网站主要内容的左侧和右侧。

这是我的 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