如何在HTML语言中将表格和视频/图像放在同一行？

2022-07-25 00:00:00 frontend javascript html css visual-glitch

我想创建一个网站，但遇到了问题。我想放一张桌子进去页面的中心，在桌子的左右两边都有视频。然而，当我这样做时，桌子最终会下降到视频下面，并且不会与视频放在同一平面上。我想把桌子放在中间，但由于某种原因，我不能让它留在页面的顶部，因为它只粘在底部。我做了一个非常小的基础网站来说明这个问题。只需将这段代码复制并传递到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>

相关文章