如何在HTML语言中将表格和视频/图像放在同一行？ [英] How do I put a table and a video/image on the same line in HTML?
本文介绍了如何在HTML语言中将表格和视频/图像放在同一行？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想创建一个网站，但遇到了问题。我想放一张桌子进去 页面的中心，在桌子的左右两边都有视频。然而，当我这样做时，桌子最终会下降到视频下面，并且不会与视频放在同一平面上。我想把桌子放在中间，但由于某种原因，我不能让它留在页面的顶部，因为它只粘在底部。我做了一个非常小的基础网站来说明这个问题。只需将这段代码复制并传递到html阅读器中，它应该会向您显示我正在努力解决的问题。如果有人能解决这个问题，我将不胜感激！
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假"><html><head><title>blah blah blah</title><style>
body {
background-color: #e6f44c;
}
table, th, td {
border:1px solid black;
}
</style></head><body><center><br><center><font size="7"><b>Welcome!</b></font><br><br></center><br><iframe style="float:left;" width="336" height="252" src="https://www.youtube.com/watch?v=ZObwftsdOIw">
</iframe><iframe style="float:right;" width="336" height="252" src="https://www.youtube.com/watch?v=gpHpEPe7OIo">
</iframe><br><br><br><br><br><br><br><br><br><br><br><br><br><br><iframe style="float:left;" width="336" height="252" src="https://www.youtube.com/watch?v=ZObwftsdOIw">
</iframe><iframe style="float:right;" width="336" height="252" src="https://www.youtube.com/watch?v=gpHpEPe7OIo">
</iframe><br><br><br><br><br><br><br><br><br><br><br><br><br><br><iframe style="float:left;" width="336" height="252" src="https://www.youtube.com/watch?v=ZObwftsdOIw">
</iframe><iframe style="float:right;" width="336" height="252" src="https://www.youtube.com/watch?v=ZObwftsdOIw">
</iframe><br><br><br><br><br><br><br><br><br><br><br><br><br><br><iframe style="float:left;" width="336" height="252" src="https://www.youtube.com/watch?v=ZObwftsdOIw">
</iframe><iframe style="float:right;" width="336" height="252" src="https://www.youtube.com/watch?v=ZObwftsdOIw">
</iframe><table style="float: center; width:600;"><tbody><tr><td><b><center>blah</center></b></td><td><b></b><center><b>blah</b></center></td><td><b><center>blah</center></b></td></tr><tr><td>blah</td><td>blah blah blah</td><td><font size="3">b;ah</font></td></tr></tbody></table></center>
</body></html>推荐答案
在Chase提到的同一页面上，您可以使用Flex，并将您的YouTube vids/iframe插入div以轻松应用相同的样式。将33.33%的宽度应用于每一列将确保相同的大小，并且表格将进行调整以适应提供的空间。
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">.flex-container {
display: flex;
flex-direction: column;
background-color: #e6f44c;
float: left;
width: 33.33%;
padding: 20px;
}
table {
float: left;
width: 33.33%;
padding: 10px;
}
.flex-container > div {
background-color: #e6f44c;
width: 100%;
text-align: center;
}
* {
box-sizing: border-box;
}<center><font size="7"><b>Welcome!</b></font><br><br></center>
<div class="flex-container">
<div>
<iframe style="width:100%" src="https://www.youtube.com/watch?v=ZObwftsdOIw">
</iframe>
</div>
<div><iframe style="width:100%" src="https://www.youtube.com/watch?v=gpHpEPe7OIo">
</iframe>
</div>
<div><iframe style="width:100%" src="https://www.youtube.com/watch?v=ZObwftsdOIw">
</iframe>
</div>
</div>
<div>
<table style="float: center;">
<tbody>
<tr>
<td>
<b>
<center>blah</center>
</b>
</td>
<td>
<b></b>
<center><b>blah</b></center>
</td>
<td>
<b>
<center>blah</center>
</b>
</td>
</tr>
<tr>
<td>blah</td>
<td>blah blah blah</td>
<td><font size="3">blah</font></td>
</tr>
</tbody>
</table>
</div>
<div class="flex-container">
<div><iframe style="width:100%" src="https://www.youtube.com/watch?v=gpHpEPe7OIo">
</iframe>
</div>
<div><iframe style="width:100%" src="https://www.youtube.com/watch?v=ZObwftsdOIw">
</iframe>
</div>
<div><iframe style="width:100%" src="https://www.youtube.com/watch?v=ZObwftsdOIw">
</iframe>
</div>
</div>这篇关于如何在HTML语言中将表格和视频/图像放在同一行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
