| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <style> | |
| 3 .mc { width:520px; height:80px; font-size:12px; line-height:20px; background
:#ddd; } | |
| 4 .mc span { font-size:2em; line-height:30px; } | |
| 5 </style> | |
| 6 | |
| 7 <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> | |
| 8 <div class="mc"> | |
| 9 <div style="float:left; padding-left:10px; padding-top:10px; width:270px;"> | |
| 10 <div style="display:inline-block; width:30px;"> | |
| 11 line<br> | |
| 12 <!-- The baseline of an inline-block is the baseline of the last in-
flow line. So make | |
| 13 sure the first line is also the last in-flow line :-P --> | |
| 14 <div style="position:absolute;"> | |
| 15 line<br> | |
| 16 line | |
| 17 </div> | |
| 18 </div><span style="margin-left:15px;">1st column</span> | |
| 19 </div> | |
| 20 <div style="float:left;"> | |
| 21 line<br> | |
| 22 line<br> | |
| 23 line<br> | |
| 24 </div> | |
| 25 </div> | |
| 26 | |
| 27 <hr> | |
| 28 | |
| 29 <p>The big text should be near the top in the first column:</p> | |
| 30 <div class="mc"> | |
| 31 <div style="float:left; padding-left:10px; padding-top:10px; width:270px;"> | |
| 32 <div style="float:left; width:30px;">line<br>line<br>line</div> | |
| 33 <span style="margin-left:15px;">1st column</span> | |
| 34 </div> | |
| 35 <div style="float:left;"> | |
| 36 line<br> | |
| 37 line<br> | |
| 38 line<br> | |
| 39 </div> | |
| 40 </div> | |
| 41 | |
| 42 <hr> | |
| 43 | |
| 44 <p>The big text should be at the top in the second column:</p> | |
| 45 <div class="mc"> | |
| 46 <div style="float:left; padding-left:10px; padding-top:10px; width:270px;"> | |
| 47 line<br> | |
| 48 line<br> | |
| 49 line<br> | |
| 50 </div> | |
| 51 <div style="float:left; width:220px;"> | |
| 52 <div style="float:left; width:30px;">line<br>line<br>line</div> | |
| 53 <span style="margin-left:15px;">2nd column</span> | |
| 54 </div> | |
| 55 </div> | |
| 56 | |
| 57 <hr> | |
| 58 | |
| 59 <p>The big text should be near the bottom in the second column:</p> | |
| 60 <div class="mc"> | |
| 61 <div style="float:left; padding-left:10px; padding-top:10px; width:270px;"> | |
| 62 line<br> | |
| 63 line<br> | |
| 64 line<br> | |
| 65 </div> | |
| 66 <div style="float:left; width:200px;"> | |
| 67 <div style="float:left; width:30px;">line<br>line<br>line</div> | |
| 68 <div style="height:35px;"></div> | |
| 69 <span style="margin-left:15px;">2nd column</span> | |
| 70 </div> | |
| 71 </div> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2412923002:
Top-align table cells in rows that cross fragmentainer boundaries. (Closed)
