Floated Divs Obeying / Not Obeying Вертикально-Выровнять
В ячейке таблицы, которая выровнена по вертикали: снизу, у меня есть один или два элемента div. Каждое деление всплывает право.
Предполагается, что элементы div не должны совпадать с основанием, но они совпадают (что я не понимаю, но это хорошо).
Однако, когда у меня в ячейке два плавающих элемента div, они выравниваются по одной верхней строке.
Я хочу, чтобы первый, меньший, div сидел полностью внизу. Другое приемлемое решение состоит в том, чтобы сделать его полной высоты ячейки стола.
Это трудно объяснить, поэтому вот код:
<style type="text/css">
table {
border-collapse: collapse;
}
td {
border:1px solid black;
vertical-align:bottom;
}
.h {
float:right;
background: #FFFFCC;
}
.ha {
float:right;
background: #FFCCFF;
}
</style>
<table>
<tr>
<td>
<div class="ha">@</div>
<div class="h">Title Text<br />Line 2</div>
</td>
<td>
<div class="ha">@</div>
<div class="h">Title Text<br />Line 2<br />Line 3</div>
</td>
<td>
<div class="h">Title Text<br />Line 2</div>
</td>
<td>
<div class="h">Title Text<br />Line 2</div>
</td>
<td>
<div class="h">Title Text<br />Line 2</div>
</td>
</tr>
<tr>
<td>
<div class="d">123456789</div>
</td>
<td>
<div class="d">123456789</div>
</td>
<td>
<div class="d">123456789</div>
</td>
<td>
<div class="d">123456789</div>
</td>
<td>
<div class="d">123456789</div>
</td>
</tr>
</table>
Вот проблемы:
Why does the @ sign sit at the same level as the yellow div? Supposedly vertical-align doesn't apply to block elements (like a floated div) 1. But it does! How can I make the @ sit at the bottom or make it full height of the table cell?Я тестирую в IE7 и FF2. Целевая поддержка IE6 / 7, FF2 / 3.
Clarification: Цель состоит в том, чтобы красный @ в нижней строке ячейки таблицы,next в желтую коробку. Использование clear на любом div будет помещать их в разные строки. Кроме того, ячейки могут иметь переменные строки текста - следовательно,line-height не поможет