无法将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> 

如果将代码粘贴到文件中并用浏览器打开，您将看到文本“将我移至底部！”。 显示在顶部。 我需要将其显示在左列的底部。 我怎样才能做到这一点？

右列中的文本在每个页面上都会有所不同（通常为长文本，因此页面将被滚动），我需要文本“将我移至底部！” 不论右栏中有多大的文字，每次都显示在左栏的底部。

谢谢。

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>

clear属性指定不允许在元素的哪一侧使用其他浮动元素。

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