div 블록의 이동을 중지하십시오.

Question

div 블록의 위치를 ​​제어하는 ​​데 문제가 있습니다. 다음은 html 코드입니다.

<div id="d1"> 
    <div id="d2"> 
     <div id="d3" style="float:left" > 
      <img src="image.jpg" > 
     </div> 

     <div id="d4"> 
      Lorem Ipsum .... Dummy Text 
     </div> 
    </div> 
    <div id="d5"> 
     Stop this text from moving up 
    </div> 
</div> 

나는 D3와 D4는 2 병렬 열이되고 싶어하고, D5는 일종의 대부분의 웹 사이트에서 바닥 글처럼,이 두 가지 아래에 와야한다. 그래서 float : left 스타일을 div d3에 추가하면 d5 텍스트가 "Lorem Ipsum"텍스트 바로 아래 위로 이동합니다. 2 열을 어떻게 작동시키고 d5의 위치를 ​​고정시킬 수 있습니까? 그것의 아주 기본적인,하지만 내가 무엇을 놓치고 있는지 모르겠습니다.

Answer 1

다음을 추가하십시오. id 'd5'로 div에

예를 들면 다음과 같습니다. 이 CSS 속성에 대한

div#d5 
{ 
    clear:both; 
} 

자세한 내용은

Answer 2

그냥 here 찾을 수 있습니다 '플로트 : 왼쪽'트릭을 할 수 없습니다. # d3에 너비 또는 무언가를 추가하고 # d4를 (너비와 함께) 부양해야합니다.

# d5는 'clear : both;'와 같은 스타일을 필요로합니다. # d3 & # d4 열 아래에 위치 시키십시오. 브라우저 화면 아래쪽에 고정 된 위치에 배치하려면 'position : fixed; 바닥 : 0; '. # d2 div는 필요하지 않습니다.