无法将 div 移至底部

Question

我搜索了这个网站 2 天，可能应用了我找到的每一个代码示例，但我不能简单地将 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">
 <div>move me to bottom!</div>
 </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>

如果您将代码粘贴到文件中并使用浏览器打开它，您将看到文本 "move me to bottom!" 显示在顶部。我需要它显示在左栏的底部。我该怎么做？

右栏的文字在每个页面都会有所不同（一般都是很长的文字，所以页面会滚动），我需要文字"move me to bottom!"显示在底部每次都在左栏，无论右栏中的文本有多大。

谢谢。

Answer 1

您只需添加<div style="clear:both"></div>并将#left移至#right 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>

 //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>

清除属性指定元素的哪一侧不允许其他浮动元素。

您可以在此处找到更多详细信息http://www.w3schools.com/cssref/pr_class_clear.asp

无法将 div 移至底部

Can't move div to bottom

html

css

css-position