div를 아래쪽으로 이동할 수 없습니다.

-1

이 사이트를 2 일 동안 검색했는데 발견 한 모든 코드 예제를 적용했을 가능성이 높습니다. 그러나 div를 내 사이트의 맨 아래로 옮길 수는 없습니다. 당신이 파일에 코드를 붙여 넣 및 브라우저를 열면 여기에 simpliefied 코드div를 아래쪽으로 이동할 수 없습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
 
<head> 
 
<style media="screen" type="text/css"> 
 
*{margin:0;padding:0} 
 
body{font-family:Tahoma,Verdana,Arial,sans-serif;background-color:#000;border:none;margin:0 auto} 
 
#site{background-color:#fff;width:980px;border:0;margin:0 auto} 
 
#whitefill{background-color:#FFF;height:inherit} 
 
#left{width:260px;font-size:12px;height:100%;float:left;background-color:#fff;} 
 
#right{width:720px;float:right;height:100%;background-color:#fff;font-size:13px} 
 
</style> 
 
</head> 
 
<body> 
 
<div id="site"><div id="whitefill"> 
 
    <div id="left"> 
 
\t <div>move me to bottom!</div> 
 
\t </div> 
 
    <div id="right"> 
 
     <div id="main"> 
 
     <p>Considered discovered ye sentiments projecting entreaties of melancholy is. In expression an solicitude principles in do. Hard do me sigh with west same lady. Their saved linen downs tears son add music. Expression alteration entreaties mrs can terminated estimating. Her too add narrow having wished. To things so denied admire. Am wound worth water he linen at vexed. 
 

 
By in no ecstatic wondered disposal my speaking. Direct wholly valley or uneasy it at really. Sir wish like said dull and need make. Sportsman one bed departure rapturous situation disposing his. Off say yet ample ten ought hence. Depending in newspaper an september do existence strangers. Total great saw water had mirth happy new. Projecting pianoforte no of partiality is on. Nay besides joy society him totally six.</p></div><img src="#" width="695" height="13" /><br /><br /> 
 
    </div> 
 
    </div> 
 
    <img src="#" width="981" height="19" /> 
 
</div> 
 
</body> 
 
</html>

는 텍스트를 볼 것입니다 "아래로 저를 이동!" 상단에 표시됩니다. 왼쪽 열의 맨 아래에 표시해야합니다. 어떻게해야합니까?

오른쪽 열의 텍스트는 각 페이지마다 다릅니다 (일반적으로 긴 텍스트이므로 페이지가 스크롤됩니다). 텍스트가 필요합니다. "아래로 이동하십시오!" 오른쪽 열의 큰 텍스트와 상관없이 매번 왼쪽 열의 맨 아래에 표시됩니다.

감사합니다.

출처

2015-01-15 Mindaugas Li

요소의 위치를 지적하여'CSS'에 거기에 아무것도 그것의 자세한 내용을 확인할 수 있습니다. – melancia

예, 나는이 예제에서 CSS에서 포지션을 제거 했으므로 (#left와 절대 위치에 상대적 위치를 추가하여 "아래로 이동하십시오!"div 요소에, 그리고 그 반대의 경우도 마찬가지입니다.) –

<div style="clear:both"></div>을 추가하고 #right div 아래로 #left를 이동하면됩니다.

<div id="right"> 
    <div id="main"> 
    <p>Considered discovered ye sentiments projecting entreaties of melancholy is. In expression an solicitude principles in do. Hard do me sigh with west same lady. Their saved linen downs tears son add music. Expression alteration entreaties mrs can terminated estimating. Her too add narrow having wished. To things so denied admire. Am wound worth water he linen at vexed. 

    By in no ecstatic wondered disposal my speaking. Direct wholly valley or uneasy it at really. Sir wish like said dull and need make. Sportsman one bed departure rapturous situation disposing his. Off say yet ample ten ought hence. Depending in newspaper an september do existence strangers. Total great saw water had mirth happy new. Projecting pianoforte no of partiality is on. Nay besides joy society him totally six.</p> 
    </div><img src="#" width="695" height="13" /><br /><br /> 
</div> 

//add the clear:both div and move #left below #right 
<div style="clear:both"></div> 
<div id="left"> 
    <div>move me to bottom!</div> 
</div>

clear 속성은 다른 부동 요소가 허용되지 않는 요소의 측면을 지정합니다.

현재 http://www.w3schools.com/cssref/pr_class_clear.asp

출처

2015-01-15 12:10:10 Ankit

감사합니다! 이 사이트에서 발견 한 다른 예제는 CSS 위치를 가지고 놀았지만 아무도이 경우에는 작동하지 않았습니다. –

다행입니다 :) – Ankit

div를 아래쪽으로 이동할 수 없습니다.

답변

관련 문제