콘텐츠를 왼쪽이나 오른쪽으로 뜨고 수직 공간을 차지하지 않기 위해서

Question

나는 워드 프레스 테마에 배경 이미지를 추가하려고하고있다. 내가 왼쪽과 사이트의 오른쪽 수직 공간을 초래하지 않고 메인 컨텐츠로 떠을 얻기 위해 노력하고

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

: 나는 body 태그 아래에 다음 코드를 추가했다.

어떻게 이것을 달성 할 수 있습니다 내가 할 whay

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

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

이것은 : 여기

내 CSS입니까?

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