2014-01-08 5 views
4

다음 단락과 같이 단락을 정렬하는 방법두 div의 단락 맞춤

this image.

나는 이것을 포함시켜야 할 신문 종류를 보여줄 필요가있다. 다음

내가

<div class="left"></div> 
<div class="right"></div> 
<div class="myImage"><img src="question.png"/></div> 

와 CSS 코드를 사용하고 HTML 코드입니다이

*{ 
margin:0; 
padding:0; 
} 

.right,.left{ 
height:300px; 
width:200px; 
float:left; 
background:red; 
margin:5px; 
} 

.myImage img{ 
width:100px; 
height:100px; 
} 

.myImage{ 
clear:both; 
position:absolute; 
top:100px; 
left:150px; 
} 
+3

무엇을 시도하셨습니까 ??? – Hiral

+0

일부 코드 나 http://jsfiddle.net을 게시하십시오. –

+2

빠른 대답은 '예'입니다. –

답변

1

텍스트의 오른쪽에 떠있는, 왼쪽에있는 이미지 요소를 만드는 것입니다 . 이미지를 오른쪽으로 잘못 배치하십시오. 이미지의 너비는 "여백"으로 지정하십시오. 그런 다음 오른쪽 div에서 빈 div를 사용하여 동일한 효과를 만들지 만 뒤집습니다. div를 텍스트의 왼쪽에 놓고 너비의 절반만큼 왼쪽으로 놓습니다. 이처럼 : 하드 코딩 당신에게 모든 크기를 고려 물론이의

<div class="left"> 
    <img src="imgurl" id="real-img" /> 
    [CONTENT_TEXT] 
</div> 
<div class="right"> 
    <div id="fake-img"></div> 
    [CONTENT_TEXT] 
</div> 

모든, :

<style> 
    .right, .left 
    { 
     width: 200px; 
     height: 300px; 
     float:left; 
    } 

    #real-img 
    { 
     width: 100px; 
     height: 100px; 
     float: right; 
     margin-right: -50px; /* half the width */ 
     margin-top: 125px; /* vertical align considering page height minus img half height */ 
    } 

    #fake-img 
    { 
     width:100px; 
     height:100px; 
     float:left; 
     margin-left: -50px; 
     margin-top: 125px; 
    } 
</style> 

그리고 HTML.