表内测试位置

我觉得我有一个简单的问题，但我无法解决它。表内测试位置

<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/

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

How it should look like

我希望把从图像左侧分离标签内的任何文字。

来源

2017-05-07 Andrew S

包裹在另一个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>

来源

2017-05-07 13:08:20

此外，不要忘记设置为'h3'的'margin' –

这是你在找什么？

th { 
 
    vertical-align: top; 
 
} 
 

 
h3 { 
 
    text-align: left; 
 
}

<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>

来源

2017-05-07 13:00:45

我不喜欢使用表这个简单的工作，而不是你可以float的图像左边添加一段css：

<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>

来源

2017-05-07 13:15:49

表内测试位置

回答

相关问题