【发布时间】：2021-10-08 06:07:52
【问题描述】：
到目前为止，我的几件事进展顺利，直到我的桌子不会低于我的列表。
它卡在顶部，当我尝试使用table { margin-top: 100px} 时，它会将桌子从顶部向下移动，但也会将其下方的所有内容向下移动，我想要它在所有内容下方。
<!DOCTYPE html>
<html>
<head>
<title>HTML Project</title>
<style>
ol {
text-align: center;
z-index: 3;
position: relative;
opacity: .99;
list-style-type: none;
}
img {
width: 200px;
height: 128px;
}
ul {
text-align: center;
z-index: 3;
position: relative;
opacity: .99;
list-style-type: none;
}
</style>
<div>
<body>
<div style="width: 500px; float:left; height:500px; margin:100px">
<h1>My favorite games</h1>
<br><br>
<ol style="float:left">
<li>Arma 3 - <a href="https://en.wikipedia.org/wiki/ARMA_3"> HERE</a></li>
<br>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/ArmA_3_Logo_%28Black_Transparent%29_%28SVG%29.svg/1200px-ArmA_3_Logo_%28Black_Transparent%29_%28SVG%29.svg.png" />
<br>
<li>World of Tanks - <a href="https://en.wikipedia.org/wiki/World_of_Tanks"> HERE</a></li>
<br>
<img src="https://o.remove.bg/downloads/2ef36636-4f93-4e6b-a514-6e14b62670b3/World-of-Tanks-Logo-removebg-preview.png" />
<br><br>
<li>Grand Theft Auto V - <a href="https://en.wikipedia.org/wiki/Grand_Theft_Auto_V"> HERE</a></li>
<br>
<img src="https://pbs.twimg.com/media/Acq8WQKCQAEd96M.png" />
<br>
<li>Counter Strike: Global Offense - <a href="https://en.wikipedia.org/wiki/Counter-Strike:_Global_Offensive"> HERE</a></li>
<br>
<img src="https://www.vippng.com/png/full/62-621853_counter-strike-global-offensive-2-logo-black-and.png" />
<br><br>
<li>Digital Combat Simulator World - <a href="https://en.wikipedia.org/wiki/Digital_Combat_Simulator"> HERE</a></li>
<img src="https://o.remove.bg/downloads/be1dcb6f-0a71-4d4a-a647-553fda3dce23/il_570xN.2519210705_9zed-removebg-preview.png" />
</ol>
</div>
<div style="width: 500px; float:right; height:500px; margin:100px">
<h1>My favorite movies</h1>
<br><br>
<ul style="float:left">
<li>Ant-Man - <a href=""> HERE</a></li>
<br>
<img src="https://o.remove.bg/downloads/28ee2a8a-99b6-43f5-b497-9b91da9328c6/s-l640-removebg-preview.png" ; style="width:250px" />
<br>
<li>Deadpool - <a href=""> HERE</a></li>
<br>
<img src="https://o.remove.bg/downloads/bb200f2d-93d0-414d-8128-e22bd7849f02/Deadpool-poster-removebg-preview.png" />
<br><br>
<li>Jurassic Park - <a href=""> HERE</a></li>
<br>
<img src="https://o.remove.bg/downloads/ac0743ca-d015-41de-8ab5-a2f9c2868850/Jurassic_Park__franchise_logo_-removebg-preview.png" />
<br>
<li>Jurassic World - <a href=""> HERE</a></li>
<br>
<img src="https://o.remove.bg/downloads/3473a625-97ec-4eb7-9c7b-be175cb6af2a/jurassicworldlogo-removebg-preview.png" />
<br><br>
<li>Curious George - <a href=""> HERE</a></li>
<img src="https://o.remove.bg/downloads/1ccc478a-eac9-4ec4-a953-44d6a6de704e/Curious-George-Logo-clipart-removebg-preview.png" />
</ul>
</div>
<table>
<th>
<td>Game</td>
<td>Publisher(s)</td>
<td>Realese Date</td>
<td>Platform(s)</td>
</th>
<tr>
<td>Arma 3</td>
<td>Bohemia Interactive</td>
<td>September 12, 2013</td>
<td>Microsoft Windows | macOS</td>
</tr>
</table>
</body>
</div>
</html>【问题讨论】：
-
使用
div包裹body标记是无效的HTML；body的唯一有效父级是html。桌子上方的div设置为float:left，这意味着它将为右侧的桌子腾出空间。如果您不想让东西漂浮在它旁边，请删除float:left。 -
是的，但我希望表格位于最底部，并且列表彼此相邻。
-
邪猴，你有不和吗？如果是这样，我可以加你，会更容易展示和解释。
标签： html css html-table