如何在HTML / CSS中將圖像放置在表格的右側？

Question

我需要在表格的右側放置一個PNG，例如：

 _______    ___
|__|____|  |\ /|
|__|____|  | X |
|__|____|  |/_\|
Table      Image

圖片不能超過屏幕寬度的50％。 該表將展開以填充剩余空間。

• 我嘗試使用CSS列，但是表數據變得奇怪。
• 我試圖將表放在另一個表中，但這似乎是糟糕的代碼。

如何在CSS中的表格右側放置圖片？

Answer 1

您可以將它們浮動：

table { float: left; width: 50% }
img { float: right; width: 50% } 

小提琴

Answer 2

使用display: inline-block

//css
table{
    display: inline-block;
}
img{
    display: inline-block;
}

演示小提琴

Answer 3

您可以嘗試使用flexbox :)

（如果您確實在此處查看示例，請整頁查看）

 #main-div { display: flex; } #img-1 { max-width: 50%; } @media only screen and (min-width: 320px) and (max-width: 723px){ #main-div { flex-direction: column; } } 

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <div id="main-div"> <table class="table" id="item-1"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> <img src="https://via.placeholder.com/1000x500" id="img-1"> </div> 

另外，這是一個工作示例 ：)

另一方面，通過將圖像的max-width屬性設置為50％，可以將圖像的大小限制為50％。

編輯：我只意識到這是一個老問題大聲笑。