所以在我的内容页面上，我在同一区域有几个不同的部分，但问题是顶部的文本是通过底部的标题。我设置了一个边距来定位底部，但它并没有动态变化。我希望它根据上面区域中的文本数量来定位，并在需要时按下它。
这是问题所在：
#content {
margin-left: 130px;
width: 706px;
height: 700px;
padding: 5px;
font-size: 100%;
text-align: left;
background-color: #eee;
vertical-align: top;
}
#content h1 {
padding: 5px;
font-weight: bold;
background-color: #6272A0;
font-size: 13px;
margin-bottom: 2px;
color: #FFFFFF;
margin: 0px;
}
#highlights {
width: 55%;
float: left;
}
#highlights p {
margin-left: 90px;
margin-right: 30px;
}
#highlights img.thumb {
margin-left: 5px;
float: left;
border: 1px #00366C solid;
}
#highlights img.icon {
margin-left: 5px;
float: left;
}
#highlights h1 {
display: inline;
color: #00366C;
font-weight: bold;
font-size: 10px;
background: none;
}
#highlights a {
color: #00366C;
}
#news {
float: right;
width: 45%;
}
#news h1 {
font-weight: bold;
background-color: #828CAA;
font-size: 13px;
color: #FFFFFF;
margin-bottom: 5px;
}
#news a {
color: #00366C;
margin-top: 3px;
padding-left: 5px;
font-weight: bold;
}
#news p {
padding-left: 5px;
display: inline;
}
#news .avatar {
vertical-align: top;
margin: 0;
float: left;
border: 1px #00366C solid;
}
#gameupdates {
margin-top: 40%;
}
#gameupdates h1 {
background-color: #828CAA;
}<section id="content">
<h1>Today on Gaming World</h1>
<br>
<section id="highlights">
<a href="http://gamingw.net/games/632">
<img class="thumb" src="images/game-632.jpg" width="80" height="65">
<h1>Coastercraft Gold</h1>
</a>
<img class="icon" src="images/maker-rmxp.gif">
<p>Enter the World of CoasterCraft. Builds rides, hire staff and do all sorts of other Theme-park managemently-things in this fun and refreshing game.</p>
<br>
<br>
<a href="http://gamingw.net/games/631">
<img class="thumb" src="images/game-631.jpg" width="80" height="65">
<h1>Cliche</h1>
</a>
<img class="icon" src="images/maker-gamemaker.gif">
<p>Fight monsters explore dungeons and find valuable treasure in this dungeon raider game. Reminiscent of the classic arcade game Gauntlet.</p>
<br>
<br>
<a href="http://gamingw.net/games/630">
<img class="thumb" src="images/game-630.jpg" width="80" height="65">
<h1>High Voltage</h1>
</a>
<img class="icon" src="images/maker-gamemaker.gif">
<p>A neat Breakout clone with quite a few gameplay tweaks. Definitely worth checking out.</p>
<br>
<br>
<a href="http://gamingw.net/games/629">
<img class="thumb" src="images/game-629.jpg" width="80" height="65">
<h1>Final Fantasy: Chaos Shadows</h1>
</a>
<img class="icon" src="images/maker-rm2k3.gif">
<p>A thousand years ago, the magical kingdom of Heldanna was mysteriously destroyed, most of its history remains unknown. Now, in the present, an archaeological group has found one of Heldanna's greatest citadels.</p>
</section>
<section id="news">
<h1>News</h1>
<a href="">
<img class="avatar" src="images/noavatar.gif" width="33" height="33">Review update #126,251,754</a>
<br>
<p>You should know the drill by now.</p>
<br>
<br>
<a href="">
<img class="avatar" src="images/bumblebee_man.gif" width="33" height="33">I'm alive.</a>
<br>
<p>And angry.</p>
<br>
<br>
<a href="">
<img class="avatar" src="images/noavatar.gif" width="33" height="33">Well now, what do we have here?</a>
<br>
<p>I do believe that it's a review update.....</p>
<br>
<br>
<a href="">
<img class="avatar" src="images/bumblebee_man.gif" width="33" height="33">I blame society.</a>
<br>
<p>Games! Games? Games?</p>
<br>
<br>
<a href="">
<img class="avatar" src="images/bumblebee_man.gif" width="33" height="33">Fade may have lied.</a>
<br>
<p>Have I?</p>
<br>
<br>
<a href="">
<img class="avatar" src="images/bartavvy.gif" width="33" height="33">THE GAME DROUGHT IS OVER!</a>
<br>
<p>Click here for lots of exciting new games!</p>
<br>
<br>
</section>
<br>
<section id="gameupdates">
<h1>Game Updates and Articles</h1>
</section>
</section>
答案 0 :(得分：1)
#gameupdates
{
clear:both;
}
清算部分将解决问题