0
因此，在我的內容頁面上，我在同一區域中有幾個不同的部分，但問題是頂部的文本通過底部部分的標題。我已經設置了一個邊距來定位底部，但它不會動態改變。我希望它根據上面的區域中的文本數量來定位，並在需要時將其壓低。如何根據尺寸將部分推到其他部分？
這就是問題所在：
#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>