상위 div에서 확장되는 하위 div

Question

상단 배너에 두 개의 이미지를 함께 배치하려고합니다. 두 번째 이미지는 "banner"부모 div 외부에 표시됩니다. 테이블을 사용해 보았지만 결과를 얻지 못했습니다. 또한 브라우저의 크기를 조정할 때 두 개의 이미지가 접히지 않아야합니다. 이 작업을 수행하는 올바른 방법은 무엇입니까? 한 가지 방법은 내가 원하지 않는 Photoshop의 이미지에 참여하는 것입니다.

<div id="banner"> 
    <div><img src=".." alt="Utilities Logo" 
    height="105" width="406" /></div> 
    <div> 
    <img src=".." alt="!" 
    height="105" width="467"> 
    </div> 
    </div> 

Answer 1

이것은 가장 쉬운 방법 인 것 같습니다. 이미지는 인라인 블록이므로 좋은 (#banner는 406 + 467보다 작아서는 안됨) 정렬됩니다. 미셸이 제안

<div id="banner"> 
    <img src=".." alt="Utilities Logo" height="105" width="406" /><img src=".." alt="!" height="105" width="467"> 
</div> 

또 다른 방법은 float CSS 속성을 재생할 수 있습니다.

정말로 브라우저 크기를 조절하지 않으려면 PS에서 병합을 고려해야합니다. 그 이유는 별개의 이유가별로 없기 때문입니다. 또는 #banner에 두 이미지를 저장할 수있을 정도로 큰 CSS min-width을 줄 수 있습니다.

Answer 2

그냥 다음 CSS 문제를 해결해야

#img1 
{ 
    float : left; 
    width : 406px; 
} 

#img2 
{ 
    float : left; 
    width : 467px; 
} 

을 시도하십시오 사업부의

<div id="banner"> 
     <div id="img1"> 
      <img src=".." alt="Utilities Logo" height="105" width="406" /> 
     </div id="img2"> 
     <div> 
      <img src=".." alt="!" height="105" width="467"> 
     </div> 
    </div> 

에 신분증에게의를 추가하고

나는 이런 식으로 뭔가 할 것

Answer 3

:

을

<div id="banner"> 
    <div id="image_1"> 
    </div> 
    <div id="image_2"> 
    </div> 
</div> 

#image_1 { height:105px; width:406px; float:left; background:url(file_path_to_image/name_of_image.png) no-repeat; } 

#image_2 { height:105px; width:467px; float:left; background:url(file_path_to_image/name_of_image.png) no-repeat; } 

또한 나는 #banner <div> 적어도 467px 너비가 있는지 확인합니다.

두 개를 서로 위에 놓으려는 경우 구체적이지 않았습니다. 위 코드를 사용하여 왼쪽에서 오른쪽으로 가로로 정렬하지 않으려면 단순히 float:left;을 꺼내십시오. #banner div and에 최소한 467px의 너비가 있어야합니다.

Answer 4

간단한은 :

<style type="text/css"> 
    #banner { white-space: nowrap; } 
</style> 

<div id="banner"> 
    <img src="banner-1.png" width="406" height="105"> 
    <img src="banner-2.png" width="467" height="105"> 
</div>