Floated Divs Obeying / Not Obeying Вертикально-Выровнять

Question

Внутри ячейки таблицы, которая выровнена по вертикали: снизу, у меня есть один или два деления. Каждое деление плавается вправо.
Предположительно, 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> 

Вот проблемы:

1. Почему знак @ находится на том же уровне, что и желтый div?
2. Предположительно, вертикальное выравнивание не применяется к элементам блока (например, с плавающим div) 1. Но это так!
3. Как сделать так, чтобы @ сидел внизу или на всю высоту ячейки таблицы?

Я тестирую в IE7 и FF2. Целевая поддержка IE6 / 7, FF2 / 3.

Уточнение: Цель состоит в том, чтобы красный @ в нижней строке ячейки таблицы, рядом с желтой рамкой. Использование clear на любом div будет помещать их в разные строки. Кроме того, ячейки могут иметь переменные строки текста - поэтому line-height не поможет.

Answer 1

Мне показалось, что эта статья чрезвычайно полезна для понимания и устранения неполадок с вертикальным выравниванием:

Понимание выравнивания по вертикали или «Как (не) центрировать содержимое по вертикали»

Answer 2

Я никогда не отвечал на первые два вопроса, поэтому не стесняйтесь давать свои ответы ниже. Но я решил последнюю проблему - как заставить это работать.

Я добавил содержащий div к двум div внутри ячеек таблицы следующим образом:

<table>
  <tr>
    <td>
      <div class="t">
        <div class="h">Title Text<br />Line 2</div>
        <div class="ha">@</div>
      </div>
    </td>

Тогда я использовал следующий CSS

<style type="text/css">
table {
  border-collapse: collapse;
}
td {
  border:1px solid black;
  vertical-align:bottom;
}
.t {
  position: relative;
  width:150px;
}
.h {
  background: #FFFFCC;
  width:135px;
  margin-right:15px;
  text-align:right;
}
.ha {
  background: #FFCCFF;
  width:15px;
  height:18px;
  position:absolute;
  right:0px;
  bottom:0px;
}
</style>

Ключ ко всему этому - , чтобы div был позицией, абсолютно относительной к его parent , родитель должен быть объявлен позицией: относительный

Answer 3

http://www.w3.org/TR/CSS2/visudet.html#line-height

Это свойство влияет на вертикальное позиционирование внутри линейного бокса блоков, созданных встроенным элементом уровня. Следующие значения имеют значение только по отношению к родительскому элементу встроенного уровня или к родительскому элементу блочного уровня, если этот элемент создает анонимные встроенные блоки; они не действуют, если такого родителя не существует.

Всегда существует путаница со свойством вертикального выравнивания в CSS, потому что в большинстве случаев оно не делает то, что вы ожидаете. Это потому, что это не то же самое, что valign, что допустимо во многих тегах HTML 4.

Для получения дополнительной информации вы можете проверить:

http://www.ibloomstudios.com/articles/vertical-align_misuse/ http://www.ibloomstudios.com/articles/applied_css_vertical-align/

Ссылка, которую разместил Дэвид Альперт, невероятно полезна в этом вопросе.

Answer 4

Если вы не хотите, чтобы оба div-элемента находились в одной строке, не используйте их оба правильно. Если вы поместите знак @ ниже текста в разметке, а затем установите для параметра float значение «clear», он будет помещен под текстом.

Answer 5

Добавьте clear: both ко второму элементу. Если вы хотите, чтобы @ был ниже желтого поля, поместите его последним в HTML-код.