Testposition innerhalb der Tabelle

Question

Ich denke, ich habe ein leichtes Problem, aber ich kann es einfach nicht lösen.

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

Aber ich will es so aussehen:

ich einen beliebigen Text innerhalb der Tags aus dem Bild auf der linken Seite freistehend setzen wollen.

Answer 1

Wickeln Sie die Inhalte in einem anderen 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

Ist das wonach Sie suchen?

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

Ich ziehe es keine Tabelle für diese einfache Arbeit verwenden, stattdessen können Sie das Bild float zu die linke und fügen Sie einen Hauch von css hinzu:

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