无法将div移至最低点

时间:2015-01-15 11:53:34

标签: html css css-position

我在这个网站上搜索了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>
&#13;
&#13;
&#13;

如果您将代码粘贴到文件中并使用浏览器打开它,您将看到文字&#34;将我移至最底层!&#34;显示在顶部。我需要它显示在左栏的底部。我怎么能这样做?

右栏中的文字在每个页面上会有所不同(它通常是一个长文本,因此页面会滚动),我需要文本&#34;将我移到底部!&#34;无论右栏中的文字多大,每次都会显示在左栏的底部。

谢谢。

1 个答案:

答案 0 :(得分:2)

您只需添加<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

找到更多详情