3

Помогите, пожалуйста. Уже долго пытаюсь опустить див в колонке к нижней границе td. Но они упорно центрируются по вертикали.

table.nonogram {
    border-spacing: 0px;
    font-size: 16px;
}

.nonogram tr {
    height: 21px;
}

.nonogram td {
    border: 1px solid black;
    padding: 0px;
}
.nonogram div {
    margin: 0px;
    display: inline-block;
    float: right;
    width: 21px;
    height: 21px;
    border: 1px black solid;
    text-align: center;
}
.nonogram .top-elems div {
    clear: both;
}
<table class="nonogram">
  <tr>
    <td></td>
    <td class="top-elems">
      <div>1</div>
    </td>
    <td class="top-elems">
      <div>1</div>
      <div>1</div>
    </td>
    <td class="top-elems">
      <div>3</div>
    </td>
  </tr>
  <tr>
    <td class="side-elems">
      <div>2</div>
    </td>
    <td></td><td></td><td></td>
  </tr>
  <tr>
    <td class="side-elems">
      <div>1</div>
      <div>1</div>
    </td>
    <td></td><td></td><td></td>
  </tr>
  <tr>
    <td class="side-elems">
      <div>2</div>
    </td>
    <td></td><td></td><td></td>
  </tr>
</table>

2
  • 1
    Вы опубликовали ответ с другой учетной записи. Вероятно, вы хотели дополнить вопрос таким образом?
    – Nick Volynkin
    Commented 18 янв. 2016 в 5:53
  • 1
    Кстати, вместо ссылок на jsfiddle нужно использовать встроенный инструмент. Я отредактировал ваш вопрос — можете посмотреть, как это выглядит в исходнике: править.
    – Nick Volynkin
    Commented 18 янв. 2016 в 5:55

2 ответа 2

1
.top-elems{
  vertical-align: bottom;
}

P.S.: Тем, кто попадет сюда из гугла желая опустить вниз div без использования table рекомендую посмотреть в сторону http://htmlbook.ru/css/display

0
td {
    vertical-align: bottom;
}
0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.