图像没有停留在表容器中

Question

not in container

我试图让图片留在左栏，但它似乎没有停留。正如你所看到的，它徘徊在桌子上。我该怎么做才能让它保持在桌面内？

<table align="center" style="width:550px" id="table" cellpadding="5">
  <tr>
    <th style="text-align: left" rowspan="2">
      <img src="avi.png" alt="" id="avatar" />
    </th>
    <th style="text-align: left">
      <h1 id="hello">My Resume</h1>
    </th>
  </tr>
  <tr>
    <td style="text-align: left">
      <p>Hello this is a crazy little test that i am doing to see if this code works</p>
    </td>
  </tr>
</table>

Answer 1

覆盖文字上的图片

<table align="center" style="width:550px;border:1px solid #c2c2c2;    position: relative;" id="table" cellpadding="5" border="0">
  <tr>
    <th style="text-align: left;border-right:1px solid #c2c2c2;min-width:50px;" rowspan="2">
      <img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/user.png" alt="" id="avatar" width="100" height="100" style="
        position: absolute;
        bottom: 0;
        left: 14px;
        top: 33px;
        z-index: 2;
        opacity: 0.5;" />
    </th>
    <th style="text-align: left;border-bottom:1px solid #c2c2c2;">
      <h1 id="hello">My Resume</h1>
    </th>
  </tr>
  <tr>
    <td style="text-align: left">
      <p>Hello this is a crazy little test that i am doing to see if this code works</p>
    </td>
  </tr>
</table>

表格容器中的图片更新样式

<table align="center" style="width:550px;border:1px solid #c2c2c2;" id="table" cellpadding="5" border="0">
  <tr>
    <th style="text-align: left;border-right:1px solid #c2c2c2;" rowspan="2">
      <img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/user.png" alt="" id="avatar" width="100" height="100" />
    </th>
    <th style="text-align: left;border-bottom:1px solid #c2c2c2;">
      <h1 id="hello">My Resume</h1>
    </th>
  </tr>
  <tr>
    <td style="text-align: left">
      <p>Hello this is a crazy little test that i am doing to see if this code works</p>
    </td>
  </tr>
</table>

Answer 2

如果您特别想要类似于您提供的示例，那么使用表格是一种古老而笨重的方式。我建议使用flexbox，这是一种简单的方法，可以让它们看起来很漂亮。

以下是一个例子：

＆＃13;

＆＃13;

body {
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
}
.resume {
  display: flex;
  align-items: center;
  justify-content: center;
}
.resume-picture {
  border: 10px solid #1976D2;
  border-radius: 50%;
  background: #f3f2f1;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  height: 175px;
}
.resume-content {
  padding: 0 15px;
}
.resume-content h2 {
  color: #1976D2;
  margin-top: 0;
}
.resume-content p {
  color: #333;
  margin: 0;
}

＆＃13;

<div class="resume">
  <img class="resume-picture" src="https://avatars2.githubusercontent.com/u/3534427?v=3" />
  <div class="resume-content">
    <h2>My Resume</h2>
    <p>Hello this is a crazy little test that i am doing to see if this code works.
      <br>Hello this is a crazy little test that i am doing to see if this code works.
      <br>Hello this is a crazy little test that i am doing to see if this code works.</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我希望这是你要找的东西。