html - 如何将此表格和按钮放在图像旁边(图像右侧)

Question

为什么图片不对？

我真的不知道该怎么办

即使我再次将图片宽度增加 10px，它们也不会移动到图片右侧。

保持它的外观非常重要。

.w3-table-all{width:60%}
.out{
width:30%;
    height: 500px;
    overflow: hidden;
}
.out img {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href='https://fonts.googleapis.com/css?family=RobotoDraft' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="out">
  <img src="https://redditupvoted.files.wordpress.com/2016/03/waffles-cat.jpg">
</div>
<div class="w3-right">
  <table class="w3-table-all">
    <thead>
      <tr class="w3-red">
        <th>Format</th>
        <th>Size</th>
        <th>Hits</th>
      </tr>
    </thead>
    <tr>
      <td><img src="http://url.zyro.com/downloader/img/format/ext/%FILE_ICON%" alt="" title="" style="vertical-align: middle;" /></td>
      <td>%FILE_SIZE%</td>
      <td>%FILE_HITS%</td>
    </tr>
  </table>
  <a href="%FILE_DOWNLOAD_URL%"><button class="w3-right w3-button dl-tab w3-block w3-dark-grey">Download</button></a></div>

Answer 1

向 .out 类添加一个 float 。

.out{
    width:30%;
    height: 500px;
    overflow: hidden;
    float: left;
}