测试表内的位置

Question

我认为我有一个简单的问题，但我无法解决它。

<table>
<tr><th><img src='http://i.imgur.com/znH0q5A.jpg'></img></th>
<th style='position: relative; top:0;'><h3>Test</h3>Lorem ipsum dolor sit 
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et 
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, 
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore 
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et 
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
sanctus est Lorem ipsum dolor sit amet.</tr>
</table>

https://jsfiddle.net/7ay1pts5/

但我希望它看起来像这样：

我想在左侧图像中分离标签内的任何文字。

Answer 1

将内容包装在另一个div中

div {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

th {
  position: relative;
  vertical-align: top;
}

h3 {
  align-self: flex-start;
  text-align: left;
  margin: 0 0 15px 0;
}

<table>
  <tr>
    <th><img src='http://i.imgur.com/znH0q5A.jpg'></th>
    <th>
      <div>
        <h3>Test</h3>
        Lorem ipsum dolor sit 
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et 
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, 
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore 
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et 
justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
sanctus est Lorem ipsum dolor sit amet.
      </div>
  </tr>
</table>

Answer 2

这是你在找什么？

＆＃13;

＆＃13;

th {
  vertical-align: top;
}

h3 {
  text-align: left;
}

＆＃13;

<table>
  <tr>
    <th><img src='http://i.imgur.com/znH0q5A.jpg'></th>
    <th style='position: relative; top:0;'>
      <h3>Test</h3>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我不想在这个简单的工作中使用表格，而是可以float左边的图像并添加一点css：

＆＃13;

＆＃13;

<div>
<img style='float:left;margin-right: 10px;' src='http://i.imgur.com/znH0q5A.jpg'>
<h3>Test</h3><p style='text-align: center;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>

＆＃13;

＆＃13;

＆＃13;