html - HTML 表格卡住了
问题描述
到目前为止,我有几件事进展顺利,直到我的桌子不会低于我的列表。
它卡在顶部,当我尝试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>
解决方案
职位包装器有问题我已经解决了这个问题
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Project</title>
<style>
ol {
text-align: center;
z-index: 3;
position: relative;
opacity: 0.99;
list-style-type: none;
}
img {
width: 200px;
height: 128px;
}
ul {
text-align: center;
z-index: 3;
position: relative;
opacity: 0.99;
list-style-type: none;
}
</style>
</head>
<body>
<div style="display: block; float: left; width: 100%;">
<div style="width: 500px; float: left; 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://pbs.twimg.com/media/Acq8WQKCQAEd96M.png" />
<br />
<li>
World of Tanks -
<a href="https://en.wikipedia.org/wiki/World_of_Tanks"> HERE</a>
</li>
<br />
<img src="https://pbs.twimg.com/media/Acq8WQKCQAEd96M.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://pbs.twimg.com/media/Acq8WQKCQAEd96M.png" />
<br /><br />
<li>
Digital Combat Simulator World -
<a href="https://en.wikipedia.org/wiki/Digital_Combat_Simulator">
HERE</a
>
</li>
<img src="https://pbs.twimg.com/media/Acq8WQKCQAEd96M.png" />
</ol>
</div>
<div style="width: 500px; float: right; 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://pbs.twimg.com/media/Acq8WQKCQAEd96M.png" />
<br />
<li>Deadpool - <a href=""> HERE</a></li>
<br />
<img src="https://pbs.twimg.com/media/Acq8WQKCQAEd96M.png" />
<br /><br />
<li>Jurassic Park - <a href=""> HERE</a></li>
<br />
<img src="https://pbs.twimg.com/media/Acq8WQKCQAEd96M.png" />
<br />
<li>Jurassic World - <a href=""> HERE</a></li>
<br />
<img src="https://pbs.twimg.com/media/Acq8WQKCQAEd96M.png" />
<br /><br />
<li>Curious George - <a href=""> HERE</a></li>
<img src="https://pbs.twimg.com/media/Acq8WQKCQAEd96M.png" />
</ul>
</div>
</div>
<div style="display: block; float: left; width: 100%;">
<table>
<tr>
<th>Game</th>
<th>Publisher(s)</th>
<th>Realese Date</th>
<th>Platform(s)</th>
</tr>
<tr>
<td>Arma 3</td>
<td>Bohemia Interactive</td>
<td>September 12, 2013</td>
<td>Microsoft Windows | macOS</td>
</tr>
</table>
</div>
</body>
</html>
可以在此处全屏查看输出:https ://4rrmg.csb.app/ 带有沙箱:https ://codesandbox.io/s/cool-mayer-4rrmg?file=/index.html:0-3450
推荐阅读
- ionic3 - 我在移动应用程序中使用 ionic3 和 angular4,我对 ion-datetime 有疑问,我的要求是仅显示当前日期和未来 15 天
- ios - UICollectionView 拖放移除半透明单元格
- javascript - Redux saga 执行多个 HTTP 请求
- ios - 使用webview制作IOS应用时输入类型错误
- javascript - 删除 `package-lock.json` 以快速解决冲突
- javascript - Internet Explorer 中的文件上传大小问题
- c# - 如何为现有包配置 PrivateAssets 助手 AKA *.Sources
- java - 多个条件 else / if 语句不知何故错误?
- powershell - PowerShell 命令输出转换为日期和时间
- postgresql - Postgresql jsonb vs 日期时间