2

Здравствуйте! Не знаю как правильно сформулировать вопрос, так что воспользуюсь картинкой и текстовым пояснением. Вот пример необходимой реализации проблемы. Линии добавлены для наглядности.

Вот как надо

Имеется ячейка таблицы, которая содержит контент как на картинке. value, value-two и value-value имеют одинаковый размер шрифта, например 12px; hey - самый большой, жирный шрифт, например 20px, а World и Hello - жирный шрифт 16px соответственно. И вот что именно непонятно в написании html и css:

  1. Не могу понять, как сделать без добавления очередной таблицы на два столбца так, чтобы значения слева и справа начинались с определенного значения, допустим от максимально широкого левого значения на какой-либо из строк был отступ в 20px и значения справа все начинались с одного и того же места (вертикальная линия на картинке).
  2. Независимо от размера шрифта текст на каждой строке должен быть прижат к низу строки (горизонтальная линия). Пытался сделать через разделение левой и правой части на 2 столбца в таблице, но не получается сделать так, чтобы каждая строка начиналаось с одного и того же значения.

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

1
  • Добавьте код в вопрос
    – br3t
    29 янв 2017 в 8:51

1 ответ 1

5

Для выравнивания по нижней части можно использовать для элементов td свойство vertical-align: bottom;. Для одинакового размера ячейки можно использовать минимальную ширину (можно в процентах относительно родителя) min-width: значение;.

Можете предоставить HTML-вёрстку для точного пояснения?

Пример на JSFiddle

table {
  width: 100%;
}
table td {
  vertical-align: bottom;
}
table td div {
  overflow: hidden;
}
table td p {
  display: flex;
  width: 100%;
  margin: 0 auto;
  border-bottom: 1px solid #000;
  clear: both;
  align-items: flex-end;
  overflow: hidden;  
}
table td span {
  display: block;
  float: left;
  margin: 0 0 -2px 0;
  padding: 5px 0 0;
  letter-spacing: 1px;
}
table td .first-column {
  min-width: 45%;
  font-size: 12px;
  line-height: 14px;
  vertical-align: bottom;
}

table td .second-column {
  min-width: 45%;
  font-weight: bold;
  border-left: 1px solid #000;
}
table td .second-column.big-font {
  color: red;
  font-size: 20px;
}
table td .second-column.medium-font {
  margin: 0 0 -4px 0;
  font-size: 16px;
}
<table>
 <td> 
   <div> 
     <p>
       <span class="first-column">value:</span>
       <span class="second-column big-font">Hey</span>
     </p> 
     <p>
       <span class="first-column">value-two:</span>
       <span class="second-column medium-font">World</span>
     </p> 
     <p>
       <span class="first-column">value-value:</span>
       <span class="second-column medium-font">Hello</span>
     </p> 
   </div> 
 </td>
</table>

3
  • Да. вот html столбца, css не делал еще <td> <div> <p>value 1<span>HI</span></p> <p> value 2<span>HELLO</span></p> <p> value 3<span>WORLD</span></p> </div> </td> Скорее всего неверно и необходимо переделать, но не понимаю как
    – Merkelst
    29 янв 2017 в 8:44
  • Вот ссылка на fiddle , возможно это подойдет 29 янв 2017 в 9:18
  • Рад был помочь =) 29 янв 2017 в 9:31

Ваш ответ

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

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