Question

我想在表格旁边添加一个图像，以便它显示一个 img。

我尝试将 img 向左浮动，但似乎不起作用。如果有人可以放置一个值，使其平行或在桌子旁边浮动，那就太好了

我的代码是：

#toppings {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: -10px;
}

#toppings td, #toppings th {
  border: 1px solid #ddd;
  padding: 0px;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

#toppings th {
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: left;
  background-color: #000000;
  color: white;
}

<table id="toppings">
  <tr>
    <th>Rank</th>
    <th>Team</th>
    <th>Record</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Yugoslavia</td>
    <td>180-2</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Argentina</td>
    <td>172-10</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Germany</td>
    <td>160-22</td>
  </tr>
</table>

谢谢

Answer 1

由于在任何地方都没有提及，我假设您必须对齐表格右侧的图像，因为 float:left 可用于对齐表格左侧的图像。

要在表格右侧对齐图像，请在图像和表格上都使用 display:inline-block。此外，您还可以使用 vertical-align:top 将图像顶部与表格顶部对齐。

完整代码如下：

HTML 代码

<table id="toppings">
    <tr>
        <th>Rank</th>
        <th>Team</th>
        <th>Record</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Yugoslavia</td>
        <td>180-2</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Argentina</td>
        <td>172-10</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Germany</td>
        <td>160-22</td>
    </tr>
</table>
<img className="testtableimage" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />

CSS 代码

#toppings {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: -10px;
  display:inline-block;
}

#toppings td, #toppings th {
  border: 1px solid #ddd;
  padding: 0px;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

#toppings th {
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: left;
  background-color: #000000;
  color: white;
}
.testtableimage{display:inline-block;vertical-align:top;width:200px;}

Answer 2

这会起作用..

HTML :
图像被包裹在一个div中，id为#imgdiv，表被包裹在另一个div { {1}}，它们都包裹在一个 #datadiv div 中。

#container

CSS ：
为 <div id="container"> <div id="imgdiv"> <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" width="100px"/> </div> <div id="datadiv"> <table> <tr> <th>Rank</th> <th>Team</th> <th>Record</th> </tr> <tr> <td>1</td> <td>Yugoslavia</td> <td>180-2</td> </tr> <tr> <td>2</td> <td>Argentina</td> <td>172-10</td> </tr> <tr> <td>3</td> <td>Germany</td> <td>160-22</td> </tr> </table> </div> </div> #imgdiv #datadiv 添加样式。

#container

如何在表格旁边添加图像

2 个答案: