Горизонтальное выравнивание h3 и h5
Я пытаюсь использовать начальную загрузку, чтобы выровнять заголовки моего h3 с моим h5, чтобы они совпадали друг с другом.
РЕДАКТИРОВАТЬ Я пытаюсь использовать уже доступную загрузку и избегать изменения css, если это не является абсолютно необходимым.
Вот экран, демонстрирующий, что я имею в виду.
Например. Имя должно совпадать с адресом 1, фамилия - с адресом 2 и т. д.
вот код, который у меня есть.
<div class = "row ">
<div class = "col-md-4 ">
<h3>First Name</h3>
<h3>Last Name</h3>
<h3>Week.</h3>
<h3>Code.</h3>
</div>
<div class = "col-md-4 ">
<h5>Address 1</h5>
<h5>Address 2</h5>
<h5>Address 3</h5>
<h5>Country</h5>
</div>
</div>
Несомненно, наличие заголовка в каждой строке полностью семантически неверно? но для достижения того, что вы хотите, просто совпадите высоту строки или высоту строки h5, равную размеру шрифта h3
@ThisGuyHasTwoThumbs Я думаю, вы попали им в точку, спасибо.
@MichaelGrinnell, не беспокойтесь, рад помочь :)
Я бы сказал, что семантически - они вообще не должны быть заголовками.
Ответы 3
установить одинаковую высоту строки, поля и отступы для h3 и h5 в стилях css
Заголовки нужны не для этого. (семантически неверно, поисковым системам это не понравится)
Я предлагаю просто использовать для этого таблицу (это табличные данные) и использовать разные правила CSS для td:first-child и td:nth-child(2), чтобы получить разные размеры шрифта.
.x {
width: 100%;
}
.x td {
padding: 10px;
font-family: sans-serif;
font-weight: light;
}
.x td:first-child {
font-size: 24px;
width: 60%;
}
.x td:nth-child(2) {
font-size: 16px;
width: 40%;
}<table class = "x">
<tr>
<td>First Name</td>
<td>Address 1</td>
</tr>
<tr>
<td>Last Name</td>
<td>Address 2</td>
</tr>
<tr>
<td>Week.</td>
<td>Address 3</td>
</tr>
<tr>
<td>Code.</td>
<td>Country</td>
</tr>
</table>Я бы сказал, что вам тоже нужен vertical-align:bottom.
@Paulie_D Я не уверен на 100%, но думаю, что по умолчанию используется baseline, что лучше подходит IMO.
Лучше не связываться с высотой h3 / h5, а вместо этого использовать несколько row. Например. что, если один из текстов станет настолько длинным, что он будет зацикливаться? Затем вы можете попрощаться с выровненным макетом. Этого никогда не произойдет, если вы используете несколько row:
<div class = "row">
<div class = "col-md-4">
<h3>First Name</h3>
</div>
<div class = "col-md-4">
<h5>Address 1</h5>
</div>
</div>
<div class = "row">
<div class = "col-md-4">
<h3>Last Name</h3>
</div>
<div class = "col-md-4">
<h5>Address 2</h5>
</div>
</div>
<div class = "row">
<div class = "col-md-4">
<h3>Week.</h3>
</div>
<div class = "col-md-4">
<h5>Address 3</h5>
</div>
</div>
<div class = "row">
<div class = "col-md-4">
<h3>Code.</h3>
</div>
<div class = "col-md-4">
<h5>Country</h5>
</div>
</div>
Помимо всего этого: я согласен с замечаниями других, что вы не должны использовать h3 / h5 в первую очередь. Заголовки предназначены для определения отношений между логическими единицами текста, поэтому <h5> - это заголовок подподраздела текста внутри главы текста, который возглавляется тегом <h3>.
может быть лучше обернуть в элемент
ul:)