두 개의 div 태그를 CSS와 수평으로 정렬하려면 어떻게해야합니까?

Question

두 div 태그를 CSS와 수평으로 정렬하려면 어떻게해야합니까?

두 개의 div 태그가 있습니다. 하나는 텍스트를 포함하고 하나는 이미지를 포함합니다. 둘 다 나란히 있습니다. 첫 번째 div의 텍스트를 이미지의 맨 아래에 맞 춥니 다. 이미지는 텍스트 오른쪽에 있습니다.

또는이 방법이어야합니다. 다양한 CSS 옵션을 가지고 놀면 일이 시작됩니다.

Answer 1

나는 당신의 상황 권리를 읽고 있어요 경우 같은 상황이 :

<div id="some_text"> 
    This is some text. 
</div> 
<div id="some_image"> 
    <img src="some_img.png" /> 
</div> 

을 그리고 첫 번째 DIV의 텍스트가 같은 두 번째 DIV에서 이미지 하단의 시작하려면 :

       |-------------------| 
          |     | 
          |  Some Image | 
          |     | 
          |     | 
          |-------------------| 
      Some Text 

두 div는 서로 독립적이므로 기본 설정 방법은 없습니다.

#some_image { 
    width: 50%; 
    float: right; 
} 

#some_text { 
    width: 50%; 
    clear: right; 
} 

확실하지 : 두 번째 DIV 같이, 첫 번째 DIV 아래에 있는지 확인하기 위해 clear 속성을 사용하여 다음 두 된 div의 폭을 설정 오른쪽에있는 이미지 DIV 부동하고 시도하는 것은 그게 완벽하게 작동하지만 시도해보십시오.

Answer 2

왜 결과가 나타나는 지 잘 모르겠습니다. 어떤 브라우저에서 테스트 해 보았습니까? 기본적으로 div 요소는 블록 수준이며, 이는 서로의 위에 겹쳐서 화면의 전체 길이를 늘려야 함을 의미합니다. div 요소를 스택으로 가져 오려면 추가 서식을 지정할 필요가 없습니다. 아래 코드는 원하는 것을 제공합니다. 이 당신을 위해 무엇을 요구하는 경우

<style type="text/css"> 
    .imageContainer { 
     width: yourWidth; 
     height: yourHeight; 
    } 

    .textCenter { 
     text-align: center; 
    } 
</style> 


<div class="textCenter imageContainer"> 
    <img src="yourSourceHere"> 
    <div> Your text Here </div> 
</div> 

Answer 3

잘 모르겠어요,하지만 당신은 당신이 언급 한 두 사업부의 하단에 상대 위치 #some_image 포장 수 : 당신은이 작업을 수행 할 수 있습니다. 그렇지 않으면, 단지 같은 동일한 DIV에서 텍스트와 이미지를 넣어 : 이미지를 떠하지 않는 경우

<div id="some_div"> 
    This is some text. 
    <img src="some_img.png" /> 
</div> 

를, 다음 텍스트를 정렬하여, 사업부의 하단 라인에 정렬되어야한다 이미지의 맨 아래로

편집 : 그래, 방금 2 개월 된 것을 알았습니다. 미안합니다.