表內測試位置

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

這是你在找什麼？

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>

Answer 3

我不喜歡使用表這個簡單的工作，而不是你可以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>