OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <style> | |
3 body { overflow: hidden; } /* Disable auto-scrollbars, to hide crbug.com/534
751 */ | |
4 .mc { -webkit-columns:2; -webkit-column-gap:20px; column-fill:auto; overflow
:hidden; width:520px; height:80px; font-size:12px; line-height:20px; background:
#ddd; } | |
5 table { border-spacing:5px; } | |
6 td:first-child { width:30px; } | |
7 td { padding:5px; } | |
8 .mc span { font-size:2em; line-height:30px; } | |
9 </style> | |
10 | |
11 <p>The big text should be in the first column, and baseline-aligned with the lin
e in its neighbor cell on the left:</p> | |
12 <div class="mc"> | |
13 <table> | |
14 <tr style="vertical-align:baseline"> | |
15 <td> | |
16 line<br> | |
17 line<br> | |
18 line<br> | |
19 line<br> | |
20 line<br> | |
21 line<br> | |
22 </td> | |
23 <td> | |
24 <span>1st column</span> | |
25 </td> | |
26 </tr> | |
27 </table> | |
28 </div> | |
29 | |
30 <hr> | |
31 | |
32 <p>The big text should be near the top in the first column:</p> | |
33 <div class="mc"> | |
34 <table> | |
35 <tr style="vertical-align:top"> | |
36 <td> | |
37 line<br> | |
38 line<br> | |
39 line<br> | |
40 line<br> | |
41 line<br> | |
42 line<br> | |
43 </td> | |
44 <td> | |
45 <span>1st column</span> | |
46 </td> | |
47 </tr> | |
48 </table> | |
49 </div> | |
50 | |
51 <hr> | |
52 | |
53 <p>The big text should be at the top in the second column:</p> | |
54 <div class="mc"> | |
55 <table> | |
56 <tr style="vertical-align:middle"> | |
57 <td> | |
58 line<br> | |
59 line<br> | |
60 line<br> | |
61 line<br> | |
62 line<br> | |
63 line<br> | |
64 </td> | |
65 <td> | |
66 <span>2nd column</span> | |
67 </td> | |
68 </tr> | |
69 </table> | |
70 </div> | |
71 | |
72 <hr> | |
73 | |
74 <p>The big text should be near the bottom in the second column:</p> | |
75 <div class="mc"> | |
76 <table> | |
77 <tr style="vertical-align:bottom"> | |
78 <td> | |
79 line<br> | |
80 line<br> | |
81 line<br> | |
82 line<br> | |
83 line<br> | |
84 line<br> | |
85 </td> | |
86 <td> | |
87 <span>2nd column</span> | |
88 </td> | |
89 </tr> | |
90 </table> | |
91 </div> | |
OLD | NEW |