Здравствуйте имеется вот такой блок, заголовки в нем могут отличатся по количеству строк соответственно декоративный разделитель может съезжать. Вопрос в следующем если в CSS(не JS) способ задать вышину всех заголовков по самому большому из них?
2 ответа
Пример 1 (при условии, что нижний текст содержит одинаковое кол-во строк )
* {
box-sizing: border-box;
}
.cards {
display: flex;
}
.card {
display: flex;
flex-direction: column;
padding: 1rem;
}
.card__dot {
width: .5rem;
height: .5rem;
background-color: #f00;
margin-top: auto;
}
.card__text {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
<div class="cards">
<div class="card">
<h3 class="card__title">Title</h3>
<div class="card__dot"></div>
<p class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat dolore ea, placeat repellendus velit maxime dolores sint minima harum dolorem sequi, molestiae atque eveniet asperiores reiciendis cupiditate maiores. Enim, asperiores.</p>
</div>
<div class="card">
<h3 class="card__title">Title<br> title</h3>
<div class="card__dot"></div>
<p class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat dolore ea, placeat repellendus velit maxime dolores sint minima harum dolorem sequi, molestiae atque eveniet asperiores reiciendis cupiditate maiores. Enim, asperiores.</p>
</div>
<div class="card">
<h3 class="card__title">Title</h3>
<div class="card__dot"></div>
<p class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat dolore ea, placeat repellendus velit maxime dolores sint minima harum dolorem sequi, molestiae atque eveniet asperiores reiciendis cupiditate maiores. Enim, asperiores.</p>
</div>
</div>
Пример 2
* {
box-sizing: border-box;
}
table {
width: 100%;
table-layout: fixed;
}
table th,
table td {
vertical-align: top;
padding: .5rem;
}
table th {
font-size: 1.75rem;
text-align: left;
}
table .dot {
width: .5rem;
height: .5rem;
background-color: #f00;
margin-top: auto;
}
<table>
<thead>
<tr>
<th>Title</th>
<th>Title <br> title</th>
<th>Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="dot"></div>
</td>
<td>
<div class="dot"></div>
</td>
<td>
<div class="dot"></div>
</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat dolore ea, placeat repellendus velit maxime dolores sint minima harum dolorem sequi, molestiae atque eveniet asperiores reiciendis cupiditate maiores. Enim, asperiores.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat dolore ea, placeat repellendus velit maxime dolores sint minima harum dolorem sequi, molestiae atque eveniet asperiores reiciendis cupiditate maiores. Enim, asperiores.</td>
</tr>
</tbody>
</table>
ответ как бы на поверхности. отказаться от flex в пользу grid
#x{
display: grid;
grid-template-rows: 2em auto; /* !!! */
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 5px;
}
/* остальной css лишь для подсветки границ */
#x{--border: red;}
p{--border: green;}
b{--border: blue;}
p, b, #x{
border: 1px solid var(--border);
padding: 5px;
}
<div id='x'>
<b>h 1</b>
<b>h 2</b>
<b>h 3</b>
<b>h 4</b>
<p>
aaaaaaaaaaa<br/>
aaaaaaaaaaa<br/>
aaaaaaaaaaa<br/>
aaaaaaaaaaa<br/>
aaaaaaaaaaa
</p>
<p>
aaaaaaaaaaa<br/>
aaaaaaaaaaa
</p>
<p>
aaaaaaaaaaa<br/>
aaaaaaaaaaa<br/>
aaaaaaaaaaa
</p>
<p>
aaaaaaaaaaa<br/>
</p>
</div>
а вообще, заголовки у вас судя по скрину ведут себя крайне странно. будто им специально через :nth-child метрики рандомизировали... вставьте код для ясности что-ли...