2016-04-14 33 views
0

, wenn die Höhe des ersten <td> größer als die zweite <td> ist, enthalten Text der zweiten <td> ist auf Mitte ausgerichtet. Ich möchte, dass der Text oder die Elemente der zweiten <td> nach oben links ausgerichtet werden, wenn die erste <td> Höhe größer als die zweite ist.Wie auszurichten Elemente in der zweiten `<td>` links oben bei der ersten `<td>` 's Höhe größer als die zweite ist `<td>`

Wie kann ich es mit css?

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>HTML5, CSS3 and JavaScript demo</title> 
 
</head> 
 
<body> 
 
    <table border="1"> 
 
    <tr> 
 
     <td> 
 
     <div style="background-color:red;width:100px;height:200px">some text1</div> 
 
     </td> 
 
     <td> 
 
     some text2 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</body> 
 
</html>

Antwort

0

vertical-align: top zum td-Tag anwenden, wenn Sie Text in allen td-Elemente nach oben ausrichten möchten. verwenden

table tr td:nth-child(2) statt table tr td

Wenn Sie nur den Text in dem zweiten Element auszurichten. nth-child wendet die Regel nur auf das 2. td-Element an.

mehr hier lesen: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

table tr td{ 
 
    background-color:red; 
 
    width:100px; 
 
    height:200px; 
 
    vertical-align:top 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>HTML5, CSS3 and JavaScript demo</title> 
 
</head> 
 
<body> 
 
    <table border="1"> 
 
    <tr> 
 
     <td> 
 
     <div>some text1</div> 
 
     </td> 
 
     <td> 
 
     some text2 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</body> 
 
</html>

0

sollte diese Arbeit:

table td:nth-child(2) { 
    vertical-align: top; 
} 
+0

es funktionierte. Könntest du bitte erklären was macht "nth-child (2)"? – CoderS

+0

n-te (2) Wählen Sie nur das zweite td-Element aus. Es ist ein CSS-Selektor. [Hier] (https://developer.mozilla.org/en/docs/Web/CSS/:nth-child) können Sie mehr über Kinderselektoren lesen. –

Verwandte Themen